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HTML 5 是 用 于 取代 HIML 4.01 和 XHTML 1.0 标准 的 HTML 标准 版 本 ， 现 在 仍 处 于 发 
展 阶段 , 但 大 部 分 浏览 器 已 经 开始 支持 HIML 5 技术 。HTML 5 有 两 大 特点 : 一 是 强化 了 Web 
网 页 的 表现 能 力 ， 另 一 是 增加 了 离线 存储 、Web 通讯 等 等 新 功能 。 随 着 HTML 5 规范 的 日 益 
成 熟 ，HTML 5 将 成 为 主流 页 面 语言 。 在 这 个 背景 下 ， 目 前 学 习 和 关注 HTML 5 网 页 设计 的 人 
越 来 越 多 ， 而 很 多 HTML 5 的 初学 者 都 苦于 找 不 到 一 本 通俗 易 懂 、 容 易 入 门 和 案例 实用 的 参 
考 书 。 为 此 ， 作 者 组 织 有 丰富 经 验 的 开发 人 员 写 作 了 这 本 精通 HTML 5 网 页 设计 的 教材 。 

本 书 特色 


内 容 全 面 ， 知识 点 由 浅 入 深 ， 涵 盖 了 所 有 HTML 5 网 页 设计 知识 点 ， 读 者 可 以 由 浅 入 深 
地 掌握 HTML 5 网 页 设计 技术 。 

图 文 并 茂 : 注重 操作 ， 图 文 并 茂 ， 在 介绍 案例 的 过 程 中 ， 每 一 个 操作 均 有 对 应 的 插图 。 这 
种 图 文 结合 的 方式 使 读者 在 学 习 过 程 中 能 够 直观 、 清 晰 地 看 到 操作 的 过 程 以 及 效果 , 便于 更 快 
地 理解 和 掌握 。 

易学 易 用 : 颠覆 传统 “看 ” 书 的 观念 ， 变 成 一 本 能 “操作 ”的 图 书 。 

案例 丰富 : 把 知识 点 融 汇 于 系统 的 案例 实 训 当中 , 并 且 结 合 经 典 案例 进行 讲解 和 拓展 。 进 
而 达到 “ 知 其 然 ， 并 知 其 所 以 然 ” 的 效果 。 

提示 技巧 : 本 书 对 读者 在 学 习 过 程 中 可 能 会 遇 到 的 疑难 问题 以 “提示 ”和 “技巧 ”的 形式 
进行 了 说 明 ， 以 免 读 者 在 学 习 的 过 程 中 走 弯路 。 

技术 实用 : 本 书 所 有 案例 都 是 模仿 现实 网 站 开发 而 设计 ， 在 实际 工作 中 的 参考 性 比较 强 。 

读者 对 象 

本 书 是 一 本 完整 介绍 HTML 5 网 页 设计 的 教程 ， 适 合 如 下 读者 学 习 使 用 : 


@ 对 网 页 设计 感 兴趣 的 读者 ， 可 以 快速 上 手 设 计 精 美的 网 页 。 

@ 对 HIML 5 语言 感 兴趣 的 读者 ， 想 快速 掌握 HTML 5 并 设计 需要 的 网 页 。 
@ 开发 Web 系统 的 人 ， 是 独一无二 的 参考 。 

代码 、 课 件 、 教 学 视频 下 载 与 技术 支持 

本 书 代 码 、 课 件 可 以 从 下 面 网 址 下 载 : 
http://pan.baidu.com/share/link?shareid=1809634813&uk=3056331768 

教学 视频 可 以 从 下 面 网 址 下 载 : 
http://pan.baidu.com/share/link?shareid=1852687522&uk=3056331768 
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如 果 下 载 有 问题 ， 请 发 邮件 给 booksaga@163.com， 邮 件 主题 为 “ 求 代码 ， 精 通 HTML5”。 
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目前 , 网 络 已 经 成 为 人 们 生活 工作 当中 不 可 缺少 的 一 部 分 , 那么 网 页 就 是 呈现 给 人 们 信息 
的 平台 。 因 此 , 怎么 样 把 信息 很 好 地 呈现 在 网 页 当中 , 就 成 了 一 个 值得 研究 的 课题 一 一 网 页 设 
计 与 制作 。 制 作 网 页 可 采用 可 视 化 编辑 软件 , 但 是 无 论 采用 哪 一 种 网 页 编辑 软件 ,最 后 都 要 将 
所 设计 的 网 页 转化 为 HTML 语言 ， 当 前 最 新 版 本 是 HTML 5。 


1.1 HTML 5 简介 


HTML 是 用 来 描述 网 页 的 一 种 语言 一 一 标记 语言 (标记 语言 是 一 套 标 记 标 签 ，HTML 使 
用 标记 标签 来 描述 网 页 ) ， 而 不 是 编程 语言 ， 它 是 制作 网 页 的 基础 语言 ， 主 要 用 来 描述 超 文 本 
中 内 容 的 显示 方式 。 


1.1.1 HTML 


标记 语言 经 过 浏览 器 的 解释 和 编译 ， 能 正确 显示 HTML 标记 的 内 容 ， 但 它 本 身 不 显示 在 
浏览 器 中 。 

HTML 语言 从 HTML 1.0 至 HTML 5 经 历 了 巨大 地 变化 ,从 单一 的 文本 显示 功能 到 图 文 并 
茂 的 多 媒体 显示 功能 ， 许 多 特性 经 过 多 年 地 完善 ， 已 经 成 为 一 种 非常 标准 的 标记 语言 。HTML 
经 历 的 版 本 及 发 布 日 期 如 下 表 所 示 。 


版 本 发 布 日 期 说 明 


:为 互联 网 工程 工作 小 组 (IETF) 工作 草案 发 布 〈 并 非 
超 文本 标记 语言 (第 一 版 ) | 1993 年 6 月 NE Waa 
标准 ) 
作为 RFC 1866 发 布 , 在 RFC 2854 发 布 之 后 被 宣布 已 经 
HIML 2.0 1995 年 11 月 
过 时 
HIML 3.2 1996 年 1 月 14 日 W3C 推荐 标准 
HIML 4.0 1997 年 12 月 18 日 W3C 推荐 标准 
HIML 4.01 1999 年 12 月 24 日 微小 改进 ，W3C 推荐 标准 
基于 严格 的 HTML 4.01 语法 , 是 国际 标准 化 组 织 和 国际 
ISO HIML 2000 年 5 月 15 日 _ 
电工 委员 会 的 标准 
| W3C 推荐 标准 ， 后 来 经 过 修订 于 2002 年 8 月 1 日 重新 
XHTML 1.0 2000 年 1 月 26 日 
发 布 
XHTML 1.1 2001 年 5 月 31 日 较 1.0 有 微小 改进 
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( 续 表 ) 
版 本 发 布 日 期 说 明 
XHTML 2.0 草案 没有 发 布 2009 年 ，W3C 停止 了 XHTML 2.0 工作 组 的 工作 
HTML 5 草案 | 2008 年 1 月 目前 的 HTML 5 规范 都 是 以 草案 发 布 , 都 不 是 最 终 版 本 


完整 的 HTML 文档 可 以 说 就 是 一 个 网 页 ， 在 该 文档 中 包括 HTML 标签 和 纯 文本 , 而 Web 
浏览 器 的 作用 就 是 读 取 HTML 文档 ， 并 以 网 页 的 形式 显示 出 来 。 
【 例 1.1】 一 个 完整 的 HTML 文档 


<html> 

<body> 
<h1> 标 题 </h1> 
<p> 锻 炼 .</p> 


</body> 
</html> 


该 HTML 文档 的 介绍 如 下 : 


<html> 与 </html> 之 间 的 文本 是 描述 网 页 的 。 
<body> 与 </body> 之 间 的 文本 是 可 见 的 页 面 内 容 。 
<h1> 与 </h1> 之 间 的 文本 被 显示 为 标题 。 

<p> 与 </p> 之 间 的 文本 被 显示 为 段落 。 


1.1:2 HTMES 


HTML 5 用 于 取代 1999 年 所 制定 的 HTML 4.01 和 XHTML 1.0， 现 仍 处 于 发 展 阶段 ， 但 
大 部 分 浏览 器 已 经 支持 HIML 5 某 些 技 术 了 。HTML 5 对 多 媒体 的 支持 功能 很 强大 , 新 增 了 如 
下 功能 : 
@ 语义 化 标签 ， 使 文档 结构 明确 。 
文档 对 象 模型 (DOM )。 
实现 2D 绘图 的 Canvas 对 象 。 
可 控 媒 体 播放 。 
离线 存储 。 
文档 编辑 。 
拖 放 。 
跨 文档 消息 。 
浏览 器 历史 管理 。 
MIME 类 型 和 协议 注册 。 


对 于 这 些 新 功能 ， 支 持 HTML 5 的 浏览 器 在 处 理 HTML 5 代码 出 错时 必须 要 更 加 


注 灵活 ， 而 那些 不 支持 HIML 5 的 浏览 器 将 忽略 HTML 5 代码 。 


2D。 
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HTML 5 的 最 大 优势 是 语法 结构 非常 简单 ， 它 具有 以 下 特点 : 

@ HTML 5 编写 简单 。 即 使 用 户 没有 任何 编程 经 验 ， 也 可 以 轻松 使 用 HTML 设计 网 页 ， 
只 需 将 文本 加 上 一 些 标 记 (Tags ) 即 可 。 

@ HTML 标记 数目 有 限 。 在 W3C 所 建议 使 用 的 HIML 5 规范 中 ， 所 有 的 控制 标记 都 是 
固定 的 ， 且 数目 也 是 有 限 的 。 所 谓 固定 是 指控 制 标记 的 名 称 固定 不 变 ， 且 每 个 控制 标 
记 都 已 被 定义 过 ， 其 所 提供 的 功能 与 相关 属性 的 设置 都 是 固定 的 。 这 是 因为 HTML 中 
只 能 引用 Strict DTD、Transitional DTD 或 Frameset DTD 中 的 控制 标记 ， 且 HTML 并 
不 允许 网 页 设计 者 自行 创建 控制 标记 ， 所 以 控制 标记 的 数目 是 有 限 的 ， 设 计 者 在 充分 
了 解 每 个 控制 标记 的 功能 后 ， 就 可 以 设计 Web 页 面 了 。 

@ HTML 语法 较 弱 。 在 W3C 制定 的 HIML 5 规范 中 ， 对 于 HTML 5 在 语法 结构 上 的 规 
格 限 制 是 较 松 散 的 ， 如 <HTML>、<Html> 或 <html> 在 浏览 器 中 具有 同样 的 功能 ， 是 不 
区 分 大 小 写 的 。 另 外 ， 也 没有 严格 要 求 每 个 控制 标记 都 要 有 相对 应 的 结束 控制 标记 ， 
如 标记 <tr> 时 ， 不 一 定 需 要 结束 标记 </tr>。 


HTML 5 最 基本 的 语法 是 < 标记 符 ></ 标 记 符 >。 标 记 符 通常 都 是 成 对 使 用 的 ， 有 一 个 开头 
标记 和 一 个 结束 标记 。 结 束 标记 只 是 在 开头 标记 的 前 面 加 一 个 斜 枉 “/”。 当 浏 览 器 收 到 HTML 
文件 后 ， 就 会 解释 里 面 的 标记 符 ， 然 后 把 标记 符 相对 应 的 功能 表达 出 来 。 


1.1.3 HTML 5 文件 的 基本 结构 


完整 的 HTML 文件 包括 标题 、 段 落 、 列 表 、 表 格 、 绘 制 的 图 形 以 及 各 种 嵌入 对 象 ， 这 些 
对 象 统称 为 HTML 元 素 。 
HTML 5 文件 的 基本 结构 如 下 : 


<!DOCTYPE html> 

<html > 文件 开始 的 标记 
<head> 文 档 头 部 开始 的 标记 
… 文 件 头 的 内 容 
</head> 文 档 头 部 开始 的 标记 
<body> 文 件 主体 开始 的 标记 
.文档 主体 内 容 
</body> 文 件 主体 结束 的 标记 
</html> 文 件 结束 的 标记 


从 上 面 的 代码 可 以 看 出 ， 在 HTML 文件 中 ， 所 有 标记 都 是 对 应 的 ， 开 头 标 记 为 “<>”， 
结束 标记 为 “</>”， 在 这 两 个 标记 中 间 添 加 内 容 ， 这 些 基 本 标记 的 使 用 方法 及 详细 解释 会 在 
下 面 的 章节 呈现 。 


1.2 HTML 5 文件 的 编写 方法 


HTML 5 文本 的 编写 方法 有 两 种 ， 分 别 如 下 : 
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@ 手工 编写 HTML 文件 。 
@ 使 用 HTML 编辑 器 。 


1.2.1 手工 编写 HTML 5 


由 于 HTML 5 是 一 种 标记 语言 ， 主 要 以 文本 形式 存在 ， 因 此 ， 所 有 的 记事 本 工具 都 可 以 
作为 它 的 开发 环境 。HTML 文件 的 扩展 名 为 .html 或 .htm， 将 HTML 源 代码 输入 到 记事 本 并 保 
存 之 后 ， 可 以 在 浏览 器 中 打开 文档 以 查看 基 效 果 。 

【 例 1.2】 使 用 记事 本 编写 HTML 文件 

使 用 记事 本 编写 HTML 文件 的 具体 操作 步骤 如 下 : 


to 册 单 击 Windows 桌面 上 的 “开始 ”按钮 选择 “所 有 程序 ”一 “附件 ”一 “记事 本 ” 
命令 ， 打 开 一 个 记事 本 ， 在 记事 本 中 输入 HTML 5 代码 ， 如 图 1-1 所 示 。 


文件 (月 ” 蝙 名 (E) 格式 (O) 各 看 (V) ”帮助 (H) 


《!DOCTYPE HTIL> 

<html> 

<body> 

<hl>Jy First Heading</hl> 
《<h22This is a heading</h2> 
<h3>This is a heading</h3> 
py first paragraph. </p> 


<p?This is another paragraph. </p> 
</body> 
</html> 


图 1-1 编辑 HTML 代码 
9 编辑 完 HTML 5 文件 后 ， 选 择 “ 文 件 ” 一 “保存 ”命令 一 或 按 Ctrl+S 快捷 键 ， 在 弹 
出 的 “另存 为 ”对 话 框 中 ， 选 择 “ 保 存 类 型 ”为 “所 有 文件 ”， 然 后 将 文件 扩展 名 设 为 .html 
或 .htm， 如 图 1-2 所 示 。 


mE: ANS 了 Les | wm | 


1-2 “另存 为 ”对 话 框 
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t3j 单 击 “ 保 存 ” 按 钮 保存 文件 。 打 开 网 页 文档 ， 在 浏览 器 中 预览 效果 ， 如 图 1-3 所 示 。 
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7 
文件 (月 。 痊 强 (E) 。 豆 看 (V) 站 襄 突 (A) 工具 (T) 帮助 (H) 


My First Heading 


This is a heading 


This is a heading 
My first paragraph. 


This is another paragraph. 


图 1-3 网 页 的 浏览 效果 


(2 使 用 记事 本 可 以 编写 HTML 文件 ， 但 是 编写 效率 太 低 ， 对 于 语法 错误 及 格式 都 没 
有 提示 。 


1.2.2 ”使 用 HTML 编辑 器 


使 用 HTML 编辑 器 可 以 弥补 记事 本 编写 HTML 文件 的 缺陷 ,目前 ,有 很 多 专门 编辑 HTML 
网 页 的 编辑 器 ， 其 中 ，Adobe 公司 出 品 的 Dreamweaver CS5.5 用 户 界 面 非常 友好 ， 是 一 款 非常 
优秀 的 网 页 开发 工具 ， 并 深 受 广大 用 户 的 喜爱 。Dreamweaver CS5.5 的 主 界面 如 图 1-4 所 示 。 
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1-4 ”Dreamweaver CS5.5 的 主 界面 
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1. 文档 窗口 


文档 窗口 位 于 界面 的 中 部 , 它 是 用 来 编排 网 页 的 区 域 , 与 在 浏览 器 中 的 结果 相似 。 在 文档 
窗口 中 ， 可 以 将 文档 分 为 三 种 视图 显示 模式 。 


@ 代码 视图 。 使 用 代码 视图 ， 可 以 在 “文档 ”窗口 中 显示 当前 文档 的 源 代 码 ， 也 可 以 在 
该 窗口 中 直接 键入 HTML 代码 。 

@ 设计 视图 。 在 设计 视图 中 ， 无 需 编 辑 任何 代码 ， 直 接 使 用 可 视 化 的 操作 编辑 网 页 。 

@ 拆 分 视图 。 在 拆 分 视图 中 ， 左 半 部 分 显示 代码 视图 ， 右 半 部 分 显示 设计 视图 。 在 这 种 
视图 模式 下 ， 可 以 通过 键入 HTML 代码 ， 直 接 观 看 效果 ， 还 可 以 通过 设计 视图 插入 对 
象 ， 直 接 查 看 源 文件 。 

在 各 种 视图 间 切 换 ， 只 需 在 文档 工具 栏 中 单 击 相 应 的 视图 按钮 即 可 ， 文 档 工具 栏 ， 如 图 

1-5 所 示 。 
| 代码 拆 分 | 设计 “|| 实时 代码 | bY 所 六。 实时 视图 | 检查 40， 多 屏 十 |w 、 标题: = | 
视图 各 式 pe 文档 稳 题 
图 1-5 文档 工具 栏 


2. 插入 面板 


插入 面板 是 在 设计 视图 下 ,使 用 频 度 很 高 的 面板 之 一 。 插 入 面板 默认 打开 的 是 “常用 ” 选 
项 ， 它 包括 了 最 常用 的 一 些 对 象 ， 例 如 ， 在 文档 中 的 光标 位 置 插入 一 段 文本 、 图 像 或 表格 等 。 
用 户 可 以 根据 需要 切换 到 其 他 选项 ， 如 图 1-6 所 示 。 
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图 1-6 插入 面板 包含 的 页 


3. “属性 ”面板 


“属性 ”面板 中 主要 包含 当前 选择 的 对 象 相关 属性 设置 。 可 以 通过 单 击 菜单 栏 中 的 “窗口 ” 
一 “属性 ”命令 或 组 合 键 CxlH+F3， 打 开 或 关闭 “属性 ”面板 。 

“属性 ”面板 是 常用 的 面板 ， 因 为 无 论 要 编辑 哪个 对 象 的 属性 ， 都 要 用 到 它 。 其 内 容 也 会 
随 着 选择 对 象 的 不 同 而 改变 ， 例 如 ， 当 光标 定位 在 文档 体 文 字 内 容 部 分 时 ， “属性 ”工具 栏 显 
示 文 字 相 关 属 性 ， 如 图 1-7 所 示 。 
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图 1-7 文字 对 象 的 “属性 ”面板 
Dreamweaver CS5.5 中 还 有 很 多 面板 ， 在 以 后 使 用 时 ， 再 作 详 细 讲 解 。 打 开 的 面板 越 多 ， 
编辑 文档 的 区 域 会 越 小 ， 为 了 方便 编辑 文档 ， 可 以 通过 F4 功能 键 快速 隐藏 和 显示 所 有 面板 。 
【 例 1.3】 使 用 Dreamweaver CS5.5 编写 HTML 文件 
具体 操作 步骤 如 下 : 


ti 启动 Dreamweaver CS5.5， 如 图 1-8 所 示 ， 在 “欢迎 ”对 话 框 的 “新 建 ”选项 组 中 选 
择 “HTML” 选 项 。 或 者 单 击 菜单 中 的 “文件 ”一 “新 建 ”命令 (快捷 键 CtrlHN ) 。 
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图 1-8 包含 欢迎 屏幕 的 主 界面 
t93 弹出 “新 建文 档 ” 对 话 框 ， 如 图 1-9 所 示 ， 在 页 面 类 型 选项 组 中 选择 HIML。 


LT 


图 1-9 “新 建文 档 ” 对 话 框 
tj 单 击 创建 “创建 ”按钮 ， 创 建 HIML 文件 ， 如 图 1-10 所 示 。 
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图 1-10 在 设计 视图 下 显示 创建 的 文档 
{@ 毕 在 文档 工具 栏 中 ， 单 击 “ 代 码 ” 选 项 卡 ， 切 换 到 代码 视图 ， 如 图 1-11 所 示 。 
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图 1-11 在 代码 视图 下 显示 创建 的 文档 本 
tog 修改 HTML 文档 标题 ， 将 代码 中 <title> 标 记 中 的 “无 标题 文档 ”修改 成 “我 的 第 一 
个 网 页 ”。 
togj 在 <body> 标 记 中 键入 “今天 我 使 用 Dreamweaver CS5.5 编写 了 第 一 个 简单 网 页 ， 感 
党 非常 高 兴 。”， 完 整 HTML 代码 如 下 所 示 : 


<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/ 
DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 第 一 个 网 页 </title> 

</head> 

<body> 
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今天 我 使 用 Dreamweaver CS5.5 编写 了 第 一 个 简单 网 页 ， 感 觉 非 常 高 兴 。 
</body> 
</html> 


0 到 保存 文件 。 单 击 菜单 “文件 ”一 “保存 ”或 按 下 CtrltS 快捷 键 ， 弹 出 “另存 为 ”对 
话 框 。 在 对 话 框 中 选择 保存 位 置 ， 并 输入 文件 名 ， 单 击 “ 保 存 ” 按 钮 ， 如 图 1-12 所 示 。 

it@8j 单 击 文档 工具 栏 的 力图 标 ,选择 查看 网 页 的 浏览 器 ， 或 按 下 功能 键 F12 使 用 默认 浏 
览 器 查看 网 页 ， 预 览 效 果 如 图 1-13 所 示 。 
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四 今天 我 使 用 Dreamweaver CS5 3 编写 了 第 一 个 简单 网 页 ， 
一 感觉 非常 高 兴 。 
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图 1-12 保存 文件 图 1-13 浏览 器 预览 效果 


1.3 ”使 用 浏览 器 查看 HTML 5 文件 


浏览 器 查看 效果 与 HTML 源 代码 是 开发 者 经 常 使 用 的 。 使 用 浏览 器 查看 网 页 的 显示 效果 ， 
也 可 以 在 浏览 器 中 直接 查看 HTML 源 代码 。 


1.3.1 与 HTML 5 兼容 的 浏览 器 


浏览 器 是 网 页 的 运行 环境 , 因此 浏览 器 的 种 类 在 网 页 设计 时 一 定 会 遇 到 。 由 于 各 个 软件 三 
商 对 HTML 的 标准 支持 有 所 不 同 ， 导 致 了 同样 的 网 页 在 不 同 的 浏览 器 下 会 有 不 同 的 表现 。 

另外 ， 对 HIML 5 新 增 的 功能 ， 各 个 浏览 器 的 支持 程度 也 不 一 致 ， 浏 览 器 的 因素 变 得 比 
以 往 传统 的 网 页 设计 更 重要 。 

目前 ， 市 场 上 的 浏览 器 种 类 繁多 ，Intemet Explorer( 以 下 简称 下) 是 占 绝对 主流 的 ， 
此 ,本 书 主要 使 用 焉 9.0 作 为 主要 浏览 器 .不 过 , 遇 到 下 浏览 器 不 能 支持 的 效果 ,将 使 用 Firefox、 
Opera 或 者 其 他 能 支持 的 浏览 器 来 说 明 ， 请 读者 注意 。 


1.3.2 ”查看 页 面 效果 


双击 前 面 编写 的 HIML 文件 ,在 正 9.0 浏览 器 窗口 中 可 以 看 到 编辑 的 HIML 页 面 效果 ， 
请 参阅 图 1-3 或 图 1-13。 
前 面 已 经 介绍 过 ， 网 页 可 以 在 不 同 的 浏览 器 中 查看 ,为 了 测试 网 页 的 兼容 性 ， 可 以 在 不 同 
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的 浏览 器 的 打开 网 页 。 
在 非 默认 浏览 器 中 打开 网 页 的 方法 有 很 多 种 ， 在 此 为 读者 介绍 两 种 常用 方法 。 
@ 方法 一 : 选择 浏览 器 菜单 “文件 ”一 “打开 ”( 有 些 浏 览 的 菜单 项 名 为 “打开 文件 ”)， 
选择 要 打开 的 网 页 即 可 。 
@ 方法 二 : 在 HTML 文件 上 单 击 和 鼠标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “打开 方式 ”菜单 
命令 ， 单 击 需要 的 浏览 器 ， 如 图 1-14 所 示 。 如 果 浏 览 器 没有 出 现在 菜单 中 ， 选 择 “ 选 
择 程序 (C) ...” 选 项 ， 在 计算 机 中 查找 浏览 器 程序 。 
打开 人 @) | 


Edit 
Print 


| 
加 使 用 360 杀 毒 扫描 。 轴 Weressft Visual Stadie 2008 


EL ， Internet Explorer 
rorerIso ， 寻 记事 本 
发 送 到 四 » [@ codelobster PHP Edition 


图 1-14 选择 浏览 器 打开 网 页 
1.3.3 ”查看 源 文件 
查看 网 页 源 代码 的 常见 方法 有 以 下 两 种 。 


@ 在 打开 的 页 面 空白 处 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜 中 选择 “查看 源 文件 ”菜单 命令 ， 
如 图 1-15 所 示 。 


Go -mr 


nN) eV ER 


5 天: memeeva CS 拓 亲 了 要 一 和 二 加 加 大 下 全 全 本 二 二 
折合 用 Dee CR 贡生 人 


图 1-15 选择 “查看 源 文件 ”菜单 命令 
@ 在 浏览 器 菜单 栏 上 选择 “查看 ”一 “查看 源 文件 ”菜单 ， 可 以 查看 源 文件 。 
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图 1-16 选择 “ 源 文件 ”菜单 命令 


【六 由 于 浏览 器 的 规定 各 不 相同 , 有 些 浏览 器 将 “查看 源 文 件 ” 命 名 为 “查看 源 代 码 ”， 
但 是 操作 方法 完全 相同 。 


1.4 问题 解答 


1. 为 何 使 用 记事 本 编辑 的 HTML 文件 打开 时 不 是 在 浏览 器 中 打开 ,而 是 直接 在 记事 本 中 
打开 ? 

很 多 初学 者 ,保存 文件 时 ,没有 将 HTML 文件 的 扩展 名 .html 或 .htm 作为 文件 的 后 缀 ， 导 
致 文件 还 是 以 .txt 为 扩展 名 ， 因 此 ， 无 法 在 浏览 器 中 查看 。 如 果 读者 是 通过 单 击 右键 ， 在 弹出 
的 快捷 菜单 中 创建 记事 本 文件 的 , 在 给 文件 重 命名 时 , 一 定 要 以 .html 或 .htm 作为 文件 的 后 级 。 
特别 要 注意 的 是 当 Windows 系统 的 扩展 名 是 隐藏 的 时 ， 更 容易 出 现 这 样 的 错误 。 读 者 可 以 在 
“文件 夹 选项 ”对 话 框 中 查看 是 否 显示 扩展 名 。 

2. 怎样 让 Dreamweaver CS6 欢迎 屏幕 显示 与 隐藏 ? 

Dreamweaver CS5.5 欢迎 屏幕 可 以 帮助 使 用 者 快速 进行 打开 文件 、 新 建文 件 和 打开 相关 帮 
助 文件 的 操作 。 如 果 读 者 不 希望 显示 该 窗口 ， 可 以 按 下 Ctrl+U 快捷 键 ， 在 弹出 的 窗口 中 选择 
左 侧 的 “常规 ”选项 ， 将 “文档 选项 ”部 分 的 “显示 欢迎 屏幕 ” 勾 选 取消 即 可 。 
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HTML 5 中 新 增 了 大 量 的 元 素 与 属性 , 这 些 新 增 的 元 素 和 属性 使 HTML 5 的 功能 变 得 更 强 


大 ， 使 网 页 设计 效果 有 了 更 多 的 实现 可 能 。 


2.1 新 增 的 主体 结构 元 素 


在 HIML 5 中 新 增 了 几 种 新 的 与 结构 相关 的 元 素 , 分 别 是 section 元 素 、article 元 素 、aside 


元 素 、nav 元 素 和 time 元 素 。 


2.1.1 section 元 素 


hl、 


<section> 标 签 定 义 文档 中 的 节 ， 比 如 章节 、 页 眉 、 页 脚 或 文档 中 的 其 他 部 分 。 它 可 以 与 
h2、h3、h4、h5、h6 等 元 素 结合 起 来 使 用 ， 显 示 文 档 结构 。 
section 标签 的 代码 结构 如 下 : 


<section> 


</section> 
【 例 2.1】〔 实 例文 件 ，ch02\2.1.html) 


<!DOCTYPE HIML> 

<html> 

<body> 

<section> 

<h2>section 元 素 使 用 方法 </h2> 

<p>section 元 素 用 于 对 网 站 或 应 用 程序 中 页 面 上 的 内 容 进行 分 块 。</p> 
</section> 

</body> 

</html> 


在 正 9.0 中 的 预览 效果 如 图 2-1 所 示 ， 实 现 了 内 容 的 分 块 显示 。 


文件 中 交 台 (EF) 可 看 (V) 牧 富 夫 (A) 工具 中 帮助 (H) 


section 元 素 使 用 方法 


section 元 素 用 于 对 网 站 或 应 用 程序 中 页 面 上 的 内 容 进 
熏 关 


图 2-1 程序 运行 结果 
2.1.2 article 元 素 
<article> 标 签 定义 外 部 的 内 容 。 外 部 内 容 可 以 是 来 自 外 部 的 新 闻 提 供 者 的 一 篇 新 文章 、 来 


自 Blog 的 文本 、 来 自 论坛 的 文本 ， 或 者 是 来 自 其 他 外 部 源 的 内 容 。 
<article> 标 签 的 代码 结构 如 下 : 


【 例 2.2】〈 实 例文 件 ，ch02\2.2.html) 


在 下 9.0 中 的 预览 效果 如 图 2-2 所 示 ， 实 现 了 外 部 内 容 的 定义 。 
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图 2-2 程序 运行 结果 
这 个 实例 讲述 article 元 素 使 用 方法 ， 在 header 元 素 中 嵌入 了 文章 的 标题 部 分 ， 在 标题 下 
部 的 p 元 素 中 , 嵌入 了 一 段 正 文 内 容 , 在 结尾 处 的 footer 元 素 中 嵌入 了 文章 的 著作 权 作 为 脚注 。 
整个 示例 的 内 容 相对 比较 独立 、 完 整 ， 因 此 ， 对 这 部 分 内 容 使 用 了 article 元 素 。 


1. article 元 素 与 section 元 素 的 区 别 


下 面 再 来 介绍 一 下 article 元 素 与 section 元 素 的 区 别 。 
【 例 2.3】 《实例 文件 : ch02\2.3.html) 


<!DOCTYPE HIML> 
<html> 
<body> 
<article> 
<hl>article 元 素 与 section 元 素 的 使 用 方法 </hl> 
<p> 何 时 使 用 article 元 素 ? 何 时 使 用 section 元 素 …..</p> 
<section> 
<h2>article 元 素 使 用 方法 </h2> 
<p>article 元 素 代表 文档 、 页 面 或 应 用 程序 中 独立 的 、 完 整 的 、 可 以 独自 被 外 部 引用 的 内 容 。 


</section> 
<section> 
<h2>section 元 素 使 用 方法 </h2> 
<p>section 元 素 用 于 对 网 站 或 应 用 程序 中 页 面 上 的 内 容 进 行 分 块 。</p> 
</section> 
</article> 
</body> 
</html> 


在 下 9.0 中 的 预览 效果 如 图 2-3 所 示 ， 可 以 清楚 地 看 到 这 两 个 元 素 的 使 用 区 别 。 
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as = 区 可 
| HUsersAdminist P - © X | @ Hvsers administr.. * 
文件 (站 ”六 济 (E) 到 看 V) 效 营 关 (A) 工具 四 ” 帮 动 (H) 


article 元 素 与 section 元 素 的 使 用 方法 
何 时 使 用 article 元 素 ? 何 时 使 用 section 元 素 …. . 
article 元 素 使 用 方法 


article 元 素 代表 文档 、 页 面 或 应 用 程序 中 独立 的 、 完 整 的 、 可 以 
独自 被 外 部 引用 的 内 容 。 


section 元 素 使 用 方法 
section 元 素 用 于 对 网 站 或 应 用 程序 中 页 面 上 的 内 容 进行 分 块 。 


图 2-3 程序 运行 结果 
2. article 元 素 的 嵌 套 


article 元 素 是 可 以 柜 套 使 用 的 ， 内 层 的 内 容 在 原则 上 需要 与 外 层 的 内 容 相 关联 。 例 如 ， 在 
-篇 博客 文章 中 , 针对 该 文章 的 评论 就 可 以 使 用 嵌 套 article 元 素 的 方式 来 表示 ; 用 来 呈现 评论 
的 article 元 素 被 包含 在 表示 整体 内 容 的 article 元 素 里 面 。 
【 例 2.4】 “实例 文件 ，ch02\2.4.html) 


<!DOCTYPE HIML> 
<html> 
<body> 
<article> 
<header> 
<hl>article 元 素 的 恢 套 </hl> 
<p> 发 表 日 期 ，<time pubdate="pubdate">2012/10/10</time></p> 
</header> 
<p>article 元 素 是 什么 ? 怎样 使 用 article 元 素 ? ……… </p> 
<section> 
<h2> 评 论 </h2> 
<article> 
<header> 
<h3> 发 表 者 : 唯一 </h3> 
<p><time pubdate datetime="2011-12-23T:21-26:00">1 小 时 前 </time></p> 
</header> 
<p> 这 篇 文章 很 不 错 啊 ， 顶 一 下 ! </p> 
</article> 
<article> 
<header> 


<h3> 发 表 者 : 唯一 </h3> 
<p><time pubdate datetime="2013-2-20 T:21-26:00">1 小 时 前 </time></p> 
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</header> 
<p> 这 篇 文章 很 不 错 啊 </p> 
</article> 
</section> 
</article> 
</body> 
</html> 


在 下 9.0 中 的 预览 效果 如 图 2-4 所 示 。 
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article 元 素 的 嵌 套 

发 表 日 期 : 2012/10/10 

article 元 素 是 什么 ? 怎样 使 用 article 元 素 ? …… 
评论 

发 表 者 : 唯一 

1 小 时 前 

这 篇 文章 很 不 错 啊 ， 顶 一 下 ! 

发 表 者 : 唯一 

1 小 时 前 

这 篇 文章 很 不 错 啊 


图 2-4 程序 运行 结果 
这 个 实例 中 的 代码 比较 完整 , 它 添加 了 读者 的 评论 内 容 ， 实例 内 容 分 为 几 个 部 分 , 文章 标 
题 放 在 了 header 元 素 中 ， 文 章 正 文 放 在 了 header 元 素 后 面 的 p 元 素 中 ，section 元 素 把 正文 与 
评论 进行 了 区 分 (是 一 个 分 块 元素 ， 用 来 把 页 面 中 的 内 容 进 行 区 分 ) ， 在 section 元 素 中 恢 入 
了 评论 的 内 容 , 每 一 个 人 的 评论 相对 又 是 比较 独立 的 、 完 整 的 ， 因 此 使 用 一 个 article 元 素 , 在 
评论 的 article 元 素 中 ， 又 可 以 分 为 标题 与 评论 内 容 部 分 ， 分 别 放 在 header 元 素 与 p 元 素 中 。 


2.1.3 aside 元 素 


aside 元 素 一 般 用 来 表示 网 站 当前 页 面 或 文章 的 附属 信息 部 分 ， 它 可 以 包含 与 当前 页 面 或 
主要 内 容 相 关 的 广告 、 导 航 条 、 引 用 、 侧 边栏 评论 部 分 ， 以 及 其 他 区 别 于 主要 内 容 的 部 分 。 

aside 元 素 主 要 有 以 下 两 种 使 用 方法 。 

第 一 种 : 被 包含 在 article 元 素 中 作为 主要 内 容 的 附属 信息 部 分 ， 其 中 的 内 容 可 以 是 与 当 
前 文章 有 关 的 相关 资料 、 名 次 解释 等 。 

aside 标签 的 代码 结构 如 下 所 示 : 


第 二 种 :在 article 元 素 之 外 使 用 作为 页 面 或 站 点 全 局 的 附属 信息 部 分 最 典型 的 是 侧 边栏 ， 
其 中 的 内 容 可 以 是 友情 链接 ， 博 客 中 的 其 他 文章 列表 、 广 告 单元 等 。 
aside 标签 的 代码 结构 如 下 所 示 : 


【 例 2.5】〔 实 例文 件 ， ch02\2.5.html) 
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<blockquote> 文 章 2</blockquote> 
</aside> 
</body> 
</html> 


在 正 9.0 中 的 预览 效果 如 图 2-5 所 示 。 
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图 2-5 程序 运行 结果 


(0 并 没有 预定 义 的 位 置 ， 可 位 于 布局 

的 任意 部 分 ， 用 于 表示 任何 非 文档 主要 内 容 的 部 分 。 例如， 可 以 在 <section> 元 素 

提 示 。 中 加 入 <aside> 元 素 ， 甚至 可 以 把 该 元 素 加 入 一 些 重要 信息 ， 如 文字 引用 。<aside> 
元 素 仅仅 描述 所 包含 的 信息 ， 而 不 反映 结构 。 


2.1.4 nav 元素 


<nav> 用 来 将 具有 导航 性 质 的 链接 划分 在 一 起 ， 使 代码 结构 在 语义 化 方面 更 加 准确 ， 同 时 
对 于 屏幕 阅读 器 等 设备 的 支持 也 更 好 。 

具体 来 说 ，nav 元 素 可 以 用 于 以 下 场合 。 

@ 传统 导航 条 : 现在 主流 网 站 上 都 有 不 同 层级 的 导航 条 ， 作 用 是 将 当前 画面 跳 转 到 的 其 
他 主页 上 。 

@ 侧 边栏 导航 : 现在 主流 博客 网 站 及 商品 网 站 上 都 有 侧 边 栏 导航 ， 其 作用 是 将 页 面 从 当 
前 文章 或 当前 商品 跳 转 到 其 他 文章 或 其 他 商品 页 上 。 

@ 页 内 导航 : 页 内 导航 的 作用 是 在 本 页 的 组 成 部 分 之 间 进 行 跳 转 。 

@ 翻 页 操作 : 翻 页 操作 是 指 在 网 站 的 多 个 页 面 的 前 后 页 面 或 博客 网 站 的 前 后 篇 文章 之 间 
滚动 。 

具体 实现 代码 如 下 : 


<nav> 


提 示 

一 个 页 面 中 可 以 拥有 多 个 <nav> 元 素 ， 作 为 页 面 整体 或 不 同 部 分 的 导航 ; 下 面 给 出 一 个 代 
码 实例 。 

【 例 2.6】 “实例 文件 ，ch02\2.6.html) 


2.1.5 time 元 素 


<time> 是 HTML 5 新 增加 的 一 个 标记 ， 用 于 定义 时 间或 日 期 。 该 元 素 可 以 代表 24 小 时 中 
的 某 一 时 刻 ， 在 表示 时 刻 时 ， 人 允许 有 时 间 差 。 在 设置 时 间或 日 期 时 ， 只 需 将 该 元 素 的 属性 
datetime 设 为 相应 的 时 间或 日 期 即 可 。 

具体 实现 代码 如 下 : 


【 例 2.7】 “实例 文件 :ch02\2.7.html) 
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<p> 
</body> 
</html> 


在 下 9.0 中 的 预览 效果 如 图 2-7 所 示 。 


起 司 HAuserswdminist PD - © X | @ Havsersadministr.. 


文件 (F) ”六 志 E) ”至 看 (V) ”站 三 突 (内 工具 (D) 帮 劲 (H) 


Time 元 素 
今天 是 2013 年 3 月 17 日 

现在 时 间 是 2013 年 3 月 17 日 晚上 5 点 
新 款 冬 装 将 于 今年 年 底 上 市 

本 消息 发 布 于 2013 年 3 月 15 日 


图 2-7 程序 运行 结 


说 明 : 

@ <p> 元 素 中 ID 号 为 pl 的 <time> 元 素 表示 的 是 日 期 。 页 面 在 解析 时 ， 获 取 的 是 属性 
datetime 中 的 值 ， 而 标记 之 间 的 内 容 只 显示 在 页 面 中 。 

@ <p> 元 素 中 ID 号 为 p2 的 <time> 元 素 表示 的 是 日 期 和 时 间 ， 使 用 字母 进行 分 隔 。 如 
果 在 整个 日 期 与 时 间 后 面 加 字母 Z， 则 表示 获取 的 是 UTC ( 世界 统一 时 间 ) 格式 。 

@ <p> 元 素 中 ID 号 为 p3 的 <time> 元 素 表 示 的 是 将 来 时 间 。 

@ <p> 元 素 中 ID 号 为 p4 的 <time> 元 素 表 示 的 是 发 布 日 期 。 


为 了 在 文档 中 将 这 两 个 日 期 进行 区 分 ， 在 最 后 一 个 <time> 元 素 中 增加 了 pubdate 
注 属性 ， 表 示 此 日 期 为 发 布 日 期 。 


C7 <time> 元 素 中 的 可 选 属性 pubdate 表示 时 间 是 否 为 发 布 日 期 , 是 一 个 布尔 值 , 该 属 
性 不 仅 可 以 用 于 <time> 元 素 ， 还 可 用 于 <article> 元 素 。 
提 示 

2.2 新 增 的 非 主体 结构 元 素 


在 HIML 5 中 还 新 增 了 一 些 非 主体 的 结构 元 素 ， 如 : header、hgroup、footer 等 。 
2.2.1 header 元 素 


header 元 素 是 一 种 具有 引导 和 导航 作用 的 结构 元 素 , 通常 用 来 放置 整个 页 面 或 页 面 内 的 内 
容 区 块 的 标题 ， 但 也 可 以 包含 其 他 内 容 ， 例 如 数据 表格 、 搜 索 表单 或 相关 的 logo 图 片 。 


header 标签 的 代码 结构 如 下 : 


在 整个 页 面 中 标题 一 般 放 在 页 面 的 开头 ， 一 个 网 页 中 没有 限制 header 元 素 的 个 数 ， 可 以 
拥有 多 个 ， 可 以 为 每 个 内 容 区 块 加 一 个 header 元 素 。 
【 例 2.8】 实例 文件 ，ch02\2.8.html) 


在 正 9.0 中 的 预览 效果 如 图 2-8 所 示 。 
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2.2.2 hgroup 元 素 


<hgroup> 标 签 用 于 对 网 页 或 区 段 〈section) 的 标题 进行 组 合 。hgroup 元 素 通常 会 将 hl 一 
h6 元 素 进行 分 组 ， 辟 如 将 一 个 内 容 区 块 的 标题 及 其 子 标题 分 为 一 组 。 
hgroup 标签 的 使 用 代码 如 下 : 


通常 , 如 果 文 章 只 有 一 个 主 标题 , 是 不 需要 hgroup 元 素 的 。 如 下 这 个 实例 就 不 需要 hgroup 
元 素 。 
【 例 2.9】《〈 实 例文 件 : ch02\2.9.html) 


<!DOCTYPE html> 
<html> 
<body> 
<article> 
<header> 
<h1> 文 章 标题 </h1> 
<p><time datetime="2010-03-20">2010 年 10 月 29 日 </time></p> 
</header> 
<p> 文 章 正 文 </p> 
</article> 
</body> 
</html> 


在 正 9.0 中 的 预览 效果 如 图 2-9 所 示 。 
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2013 年 10 月 29 日 
文章 正文 


图 2-9 程序 运行 结果 
但 是 , 如 果 文 章 有 主 标题 和 子 标题 ， 就 需要 使 用 hgroup 元 素 。 如 下 这 个 实例 就 需要 hgroup 


HTML 5 中 的 新 增 元 素 。 第 2 章 


元 素 。 
【 例 2.10】 《实例 文件 :ch02\2.10.html) 
<!DOCTYPE html> 
<html> 
<body> 
<article> 
<header> 
<hgroup> 
<h1> 文 章 主 标题 </h1> 
<h2> 文 章 子 标题 </h2> 
</hgroup> 
<p><time datetime="2013-03-20">2013 年 10 月 29 日 </time></p> 
</header> 
<p> 文 章 正文 </p> 
</article> 
</body> 
</html> 


在 正 9.0 中 的 预览 效果 如 图 2-10 所 示 。 


i EE 
Ky 和 HAUsersAdminist PD - © X | @ HANusersAdministr. 


文件 (月 。 痴 强 [E) ”青春 (V) ”收藏 突 (A) ”工具 (T) ”帮助 (H) 
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文章 主 标 题 

文章 子 标题 

2013 年 10 月 29 日 

文章 正文 
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2.2.3 footer 元 素 


footer 元 素 可 以 作为 其 上 层 父 级 内 容 区 块 或 是 一 个 根 区 块 的 脚注 。footer 通常 包括 其 相关 
区 块 的 脚注 信息 ， 如 作者 、 相 关 阅 读 链接 及 版 权 信息 等 。 
使 用 footer 标签 设置 文档 页 脚 的 代码 如 下 : 


<footer>...... </footer> 


在 HTML 5 出 现 之 前 ， 网 页 设计 人 员 使 用 下 面 的 方式 编写 页 脚 。 


【 例 2.11】 《实例 文件 ， ch02\2.11.html) 


在 正 9.0 中 的 预览 效果 如 图 2-11 所 示 。 


2-11 程序 运行 结果 


但 是 到 了 HTML 5 之 后 ,这 种 方式 将 不 再 使 用 ,而 是 使 用 更 加 语义 化 的 footer 元 素来 替代 。 
【 例 2.12】 《实例 文件 ，ch02\2.12.html) 


在 正 9.0 中 的 预览 效果 如 图 2-12 所 示 。 
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图 2-12 程序 运行 结果 


【 例 2.13】 实例 文件 ，ch02\2.13.html) 


在 正 9.0 中 的 预览 效果 如 图 2-13 所 示 。 
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图 2-13 程序 运行 结果 
2.2.4 figure 元素 


figure 元 素 是 一 种 元 素 的 组 合 ， 可 带 有 标题 (可 选 ) 。figure 元 素 用 来 表示 网 页 上 一 块 独 
立 的 内 容 ， 将 其 从 网 页 上 移 除 后 不 会 对 网 页 上 的 其 他 内 容 产生 影响 。figure 所 表示 的 内 容 可 以 
是 图 片 、 统 计 图 或 代码 示例 。 

figure 元 素 的 实现 代码 如 下 : 


使 用 figure 元素 时 , 需要 用 figcaption 元 素 为 figure 元 素 组 添加 标题 。 不过, figure 
元 素 内 最 多 只 允许 放置 一 个 figcaption 元 素 ， 其 他 元 素 可 无 限 放置 。 


1. 不 带 标题 的 figure 元 素 的 使 用 
【 例 2.14】 不 带 标题 的 figure 元 素 的 使 用 (实例 文件 ，ch02\2.14.html) 


<!DOCTYPE HIML> 
<html> 
<head> 
<title> 不 带 有 标题 的 figure 元 素 </title> 
</head> 
<body> 
<figure> 
<img alt="images/logo.jpg"/> 
</figure> 
</body> 
</html> 


在 下 9.0 中 的 预览 效果 如 图 2-14 所 示 。 


图 2-14 程序 运行 结果 
2. 带 有 标题 的 figure 元 素 的 使 用 
【 例 2.15】 带 有 标题 的 figure 元 素 的 使 用 〈 实 例文 件 ， ch02\2.15.html) 


在 焉 9.0 中 的 预览 效果 如 图 2-15 所 示 。 


多 二 有 SEEa9foure 元 素 


2-15 程序 运行 结果 
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3. 多 张 图 片 用 同一 标题 的 figure 元 素 的 使 用 


【 例 2.16】 多 张 图 片 用 同一 标题 的 figure 元 素 的 使 用 (实例 文件 : ch02\2.16.html) 


<!DOCTYPE HIML> 
<html> 
<head> 
<title> 多 张 图 片 ， 同 一 标题 的 figure 元 素 </title> 
</head> 
<body> 

<figure> 

<img alt="images/logo.jpg"/> 

<img alt="images/logol.ipg"/> 
<img alt="images/logo2.jpg"/> 

</figure> 
<figcaption> 标 题 提示 </figcaption> 
</body> 
</html> 


在 正 9.0 中 的 预览 效果 如 图 2-16 所 示 。 
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2.2.5 address 元 素 


address 元 素 用 来 在 文档 中 呈现 联系 信息 ， 包 括 文档 作者 或 文档 维护 者 姓名 


址 、 电 子 邮 箱 、 真 实地 址 和 电话 号 码 等 。 
address 元 素 的 实现 代码 如 下 : 


、 网 站 链接 地 


【 例 2.17】address 元 素 的 使 用 《实例 文件 : ch02\2.17.html) 


在 正 9.0 中 的 预览 效果 如 图 2-17 所 示 。 
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图 2-17 程序 运行 结果 


另外 ，address 元 素 不 仅 可 以 单独 使 用 ， 还 可 以 与 footer 元 素 、time 元 素 与 address 元 素 结 
合 起 来 使 用 。 
【 例 2.18】address 元 素 与 其 他 元 素 结合 使 用 实例 文件 ，ch02\2.18.html) 


精 殉 HTNML 5 网 页 设计 


发 表 于 <time datetime="2013-3-17">2013 年 3 月 17 日 <time> 


3 和 HAUsersAdminist PD - OX | @ HAUsersAdministr. 
文件 站” 淆 强 (E) 下 看 (V) 收 芍 交 (A) 工具 (T) 者 助 (H) 
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2.3 ”新 增 其 他 常用 元 素 


除了 结构 元 素 外 ， 在 HTML 5 中 ， 还 新 增 了 其 他 元 素 ， 如 progress 元 素 、command 元 素 、 
embed 元 素 、mark 元 素 和 details 元 素 等 。 


2.3.1 mark 元 素 


mark 元 素 主 要 用 来 呈现 需要 突出 显示 或 高 亮 显 示 的 文字 。mark 元 素 的 典型 应 用 是 在 搜索 
结果 中 向 用 户 高 亮 显示 搜索 关键 词 。 其 使 用 方法 与 <em> 和 <strong> 有 相似 之 处 ， 但 相 比 而 言 ， 
HTML 5 中 新 增 的 <mark> 元 素 在 突出 显示 时 ， 更 加 随意 与 灵活 。 

HTML 5 中 代码 示例 : 


【 例 2.19】mark 元 素 的 使 用 (实例 文件 ，ch02\2.19.html) 

在 页 面 中 ， 首 先 使 用 <h5> 元 素 创建 一 个 标题 “优秀 开发 人 员 的 素质 ”， 然 后 通过 <p> 元 素 
对 标题 进行 阐述 。 在 阐述 的 文字 中 , 为 了 引起 用 户 的 注意 ， 使 用 <mark> 元 素 高 亮 处 理 字 符 “ 素 
质 ”、“ 过 硬 ” 和 “务实 ”等 字样 。 

具体 的 代码 如 下 : 


<!DOCTYPE html> 
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<html> 
<head> 
<meta charset="utf-8" /> 
<title>mark 元 素 的 使 用 </title> 
<link hre 人 ="Css/css3.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<h5> 优 秀 开发 人 员 的 <mark> 素 质 </mark></h5> 
<p class="p3_5"> 
一 个 优秀 的 Web 页 面 开 发 人 人员， 必须 具有 
<mark> 过 硬 </mark> 的 技术 与 
<mark> 务 实 </mark> 的 专业 精神 
</p> 
</body> 
</html> 


该 页 面 在 正 9.0 浏览 器 下 执行 的 效果 如 图 2-19 所 示 。 
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优秀 开发 人 员 的 素质 


一 个 优秀 的 Web 页 面 开发 人 员 ， 必 须 具 有 过 硬 的 技术 与 
务实 的 专业 精神 
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0@! <mark> 元 素 的 这 种 高 亮 显 示 的 特征 ， 除 在 文档 中 突出 显示 外 ， 还 常用 于 查看 搜索 
站 结果 页 面 中 关键 字 的 高 亮 显示 ， 其 目的 主要 是 引起 用 户 的 注意 。 


中 


虽然 <mark> 元 素 在 使 用 效果 上 与 <em> 或 <strong> 元 素 有 相似 之 处 ， 但 三 者 的 出 发 
点 是 不 一 样 的 。<strong> 元 素 是 作者 对 文档 中 某 段 文字 的 重要 性 进行 的 强调 ; <em> 
注 元 素 是 作者 为 了 突出 文章 重点 而 进行 的 设置 ; <mark> 元 素 是 在 数据 展示 时 ， 以 高 
亮 形式 显示 某 些 字符 ， 与 原作 者 本 意 无 关 。 
2.3.2 rp、rt 与 ruby 元 素 


ruby 元 素 由 一 个 或 多 个 字符 (需要 一 个 解释 /发 音 ) 和 一 个 提供 该 信息 的 rt 元 素 组 成 ， 还 


精 绚 HTImL 5 网 页 设计 


包括 可 选 的 tp 元素， 定义 当 浏 览 器 不 支持 ruby 元 素 时 显示 的 内 容 。 
Ip、1t 与 ruby 元 素 结合 使 用 的 代码 如 下 : 


<mby> 
<rt><rp>(</rp><1p>)</p></rt> 
</ruby> 


【 例 2.20】 使 用 mby 注释 繁体 字 “ 漠 ”【〔 实 例文 件 : ch02\2.20.html) 


<!DOCTYPE html> 

<html> 

<body> 

<rmby> 

汉 <rt><mp>(</tp> 汉 <1p>)</tp></rt> 
</mby> 

</body> 

</html> 


在 下 9.0 中 的 预览 效果 如 图 2-20 所 示 。 


C3 国 HAUsersAdminist P - 上 X | @ HAusersAdminis 
文件 (月 ” 编 缉 (E) 。 主 看 (V) ” 收 藏 夫 (A) 工具 Tm) 才 动 (H) 


并 


图 2-20 程序 运行 结果 


0@! 支持 ruby 元 素 的 浏览 器 不 会 显示 印 元 率 的 内 容 。 
提 示 
2.3.3 ”progress 元 素 


progress 元 素 表示 运行 中 的 进程 ， 可 以 使 用 progress 元 素来 显示 JavaScript 中 耗费 时 间 的 
函数 进程 。 例 如 下 载 文 件 时 ， 文 件 下 载 到 本 地 的 进度 值 ， 可 以 通过 该 元 素 动态 展示 在 页 面 中 ， 
展示 的 方式 既 可 以 使 用 整数 (如 1 一 100) ， 也 可 以 使 用 百分比 (如 10% 一 100%) 。 

<progress> 元 素 的 属性 及 描述 如 下 表 所 示 。 
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属性 描述 
max 设置 完成 时 的 值 ， 表 示 总 体 工作 量 
value 设置 正在 进行 时 的 值 ， 表 示 已 完成 的 工作 量 


<progress> 元 素 中 设置 的 value 值 必 须 小 于 或 等 于 max 属性 值 ， 且 两 者 都 必须 大 于 


注 0。 


【 例 2.21】 使 用 progress 元 素 表 示 下 载 进度 〈 实 例文 件 : ch02\2.21.html) 


<!DOCTYPE HIML> 
<html> 
<body> 
对 象 的 下 载 进度 : 
<progress> 
<span id="objprogress">76</span>% 
</progress> 
</body> 
</html> 


在 正 9.0 中 的 预览 效果 如 图 2-21 所 示 。 
Fe 区 9 


| Hsers mdminist p - © x | @ Husersy 
文件 (站 疾 句 (E) ”至 看 (V) 收藏 天 (A) 工具 (T) 帮助 (H) 
对 象 的 下 载 进度 ， 76% 


图 2-21 程序 运行 结果 
2.3.4 command 元 素 


command 元 素 表示 用 户 能 够 调用 的 命令 ， 可 以 定义 命令 按钮 ， 比 如 单 选 按钮 、 复 选 框 或 
按钮 。 
HTML 5 中 使 用 的 代码 : 


<command type="command">. </command> 
【 例 2.22】 使 用 command 元 素 标记 一 个 按钮 (实例 文件 ，ch02\2.22.html) 


<!DOCTYPE HIML> 
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<html> 
<body> 
<=menu> 
<command onclick="alert('Hello World)">Click Me!</command> 
</menu> 


</html> 
在 正 9.0 中 的 预览 效果 如 图 2-22 所 示 。 单 击 网 页 中 的 “Click Me” 区 域 ， 将 弹出 提示 信 
息 框 。 


[SE 


Ca 人 A je HAUsersAdminist P ~ OX | 居 H\UserswAdmi 


Click Me! a 
来 网 的 沪 昌 。。” 区 到 


i Hello World 


图 2-22 程序 运行 结果 


0@! 只 有 当 command 元 素 位 于 menu 元 素 内 时 ， 该 元 素 才 是 可 见 的 。 否 则 不 会 显示 这 
站 未 个 元 素 ， 但 是 可 以 用 它 规定 键盘 快捷 键 。 


2.3.5 embed 元素 


embed 元 素 用 来 插入 各 种 多 媒体 ， 格 式 可 以 是 Midi、Wav、AIFF、AU、MP3 等 。 
HTML 5 中 代码 示例 : 


【 例 2.23】 使 用 embed 元 素 插 入 动画 〈 实 例文 件 ，ch02\2.23.html) 


<!DOCTYPE HTML> 
<html> 
<body> 
<embed src="images/ 飞 翔 的 海 乌 .swf"'/> 


</body> 
</html> 
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在 正 9.0 中 的 预览 效果 如 图 2-23 所 示 。 


aC e-em 


7 WS 
RD |] HAUserswAdminist D 7 © X | @ HAusersAdministr 
文件 (] ” 编 强 (E) 。 豆 看 (V) ”收藏 夫 (A) ”工具 TM 帮助 (H) 


图 2-23 程序 运行 结果 
2.3.6 details 与 summary 元 素 


details 元 素 表 示 用 户 要 求 得 到 并 且 可 以 得 到 的 细节 信息 ， 与 summary 元 素 配 合 使 用 。 
summary 元 素 提供 标题 或 图 例 。 标题 是 可 见 的 , 用 户 单 击 标题 时 , 会 显示 出 细节 信息 。summary 
元 素 应 该 是 details 元 素 的 第 一 个 子 元 素 。 

HTML 5 中 代码 示例 : 


<details> 


【 例 2.24】 使 用 details 元 素 制作 简单 页 面 ( 实 例文 件 : ch02W2.24.html) 


<!DOCTYPE HIML> 
<html> 
<body> 
<details> 
<summary> 苹 果 冰 激 凌 </summary> 
<img src="images/ 冰 激 凌 .jpg" alt=" 苹 果 冰 激 凌 "/> 
<div> 
<h3> 材 料 : 苹果 500g， 白 糖 150g， 新 鲜 牛 奶 两 瓶 。</h3> 
<p> 制 作 方法 : 将 苹果 洗 净 ， 去 皮 挖 核 ， 切 成 薄片 ， 搅 成 浆 状 ， 放 入 白糖 及 1000 克 开 水 ， 加 入 者 
沸 的 牛奶 ， 搅 拌 均匀 ， 倒 入 盛 器 内 冷却 后 置 于 冰箱 冻结 即 成 。 
</p> 
</div> 
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</details> 


在 下 9.0 中 的 预览 效果 如 图 2-24 所 示 。 


文件 旺 (E) 至 看 (V)】 放 击 实 (A) 工具 Tm 孝 动 H】 


家 全 和 
节 果 洲 尖 计 站 全 | 
材料 : 苹果 500g， 白 糖 150g， 新 鲜 牛 奶 两 瓶 。 
制作 方法 ， 将 蔷 果 洗 兆 ， 去 皮 控 核 ， 切 成 薄片 ， 捞 成 次 状 ， 放 入 白 


40007 水， 和。 搅拌 均匀 ， 倒 入 盛 器 内 冷却 后 
置 于 冰箱 闵 结 即 三 


图 2-24 程序 运行 结果 


0@! 默认 情况 下 ， 浏 览 器 支持 details 元 素 ， 除 了 summary 标签 外 的 内 容 将 会 被 隐藏 。 
提 示 


2.3.7 ”datalist 元 素 


datalist 用 来 辅助 文本 框 的 输入 功能 ， 它 本 身 是 隐藏 的 ， 与 表单 文本 框 中 的 list 属性 绑 定 ， 
即 可 将 list 属性 值 设置 为 datalist 的 ID 号 ， 类似 suggest 组件。 目前 只 支持 opera 浏览 器 。 
HTML 5 中 代码 示例 : 


<datalist></datalist> 
【 例 2.25】 使 用 datalist 元 素 制作 下 列 列表 框 ( 实 例文 件 : ch02\2.25.html) 


<IDOCTYPE HTML> 
<html> 
<head> 
<title>datalist 测试 </title> 
</head> 
<body> 
<form action="#"> 
<fieldset> 
<legend> 请 输入 职业 </legend> 
<input type="text" list="worklist"> 
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<datalist 1d="worklist"> 
<option value=" 程 序 开发 员 "></option> 
<option value=" 系 统 架构 师 "></option> 
<option value=" 数 据 维护 员 "></option> 
</datalist> 
</fieldset> 
</form> 


</body> 
</html> 


在 Opera 中 预览 效果 如 图 2-25 所 示 。 


|Ohapwwwwopera x [D datalistas 


所 地 站 om | 孚 本 地 localhosyHJU 请 


[ss 
| 


程序 开发 员 


系统 架构 师 [As 
数据 维护 员 


图 2-25 程序 运行 结果 


2.4 新 增 全 局 属性 
在 HTML 5 中 新 增 了 许多 全 局 属性 ， 下 面 来 详细 介绍 常用 的 新 增 属性 。 


2.4.1 _ contenteditable 属性 


Contenteditable 属性 是 HTML 5 中 新 增 的 标准 属性 ， 其 主要 功能 是 指定 是 否 允 许 用 户 编辑 
内 容 。 该 属性 有 两 个 值 : true 和 false。 
Contenteditable 属性 为 true 时 表示 可 以 编辑 ， 为 false 时 表示 不 可 编辑 。 如 果 没 有 指定 值 
则 会 采用 隐藏 的 mherit (继承 ) 状态 ， 即 如 果 元 素 的 父 元 素 是 可 编辑 的 ， 则 该 元 素 就 是 可 编辑 
的 。 
【 例 2.26】 使 用 contenteditable 属性 的 实例 实例 文件 ，ch02\2.26.html) 


<!IDOCTYPE html> 

<head> 

<title>conentEditalbe 属性 示例 </title> 
</head> 

<body> 


精 谣 HTML 5 网 页 设计 


不 。 


注 


<h3> 对 以 下 内 容 进行 编辑 内 容 </h3> 
<ol contentEditable="true"> 
<li> 列 表 一 </li> 

<i> 列 表 二 <Ai> 

<li> 列 表 三 <4i> 

</ol> 

</body> 

</html> 


使 用 正 9.0 浏览 器 查看 网 页 内 容 ， 打 开 后 可 以 在 网 页 中 输入 相关 内 容 ， 效 果 如 图 2-26 所 


A A 
(二 We HsersAdminist P ~ © X | @ conentEditalbe 必 性 


文件 (月 ”六 强 (E) ” 副 看 (V) 收藏 闪 (A) ”工具 (TD) ”帮助 (H) 


对 以 下 内 容 进 行 编辑 内 容 


图 2-26 程序 运行 结果 


对 内 容 进 行 编辑 后 ， 如 果 关闭 网 页 ， 编 辑 的 内 容 将 不 会 被 保存 。 如 果 想 要 保存 其 
内 容 ， 只 能 把 该 元 素 的 innerHTML 发 送 到 服务 器 端 进行 保存 。 


2.4.2 ”spellcheck 属性 


spellcheck 属性 是 HTML 5 中 的 新 属性 ， 规 定 是 否 对 元 素 内 容 进行 拼写 检查 。 可 对 以 下 


文本 进行 拼写 检查 : 类 型 为 text 的 input 元 素 中 的 值 ( 非 密码 ) 、textarea 元 素 中 的 值 、 可 
编辑 元 素 中 的 值 。 


【 例 2.27】 使 用 spellcheck 属性 的 实例 〈 实 例文 件 : ch02\2.27.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title>hello，Word</title> 

</head> 

<body> 

<p contenteditable="true" spellcheck="true"> 使 用 spellcheck 属性 ， 使 段落 内 容 可 被 编辑 。</p> 
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使 用 下 9.0 浏览 器 查看 网 页 内 容 ， 打 开 后 可 以 在 网 页 中 输入 相关 内 容 ， 效 果 如 图 2-27 所 
示 。 


a HUsersAdminist P - CX | 古 hello , word 
文件 (月 疙 过 (E) 。 豆 看 (V) 收藏 闪 (A) 工具 (T) 才 动 (H) 


使 用 spellcheck 属 性 ， 使 段落 内 容 可 被 编辑 。 
你 好 ! 


图 2-27 程序 运行 结果 
2.4.3 tablndex 属性 


tabIndex 属性 可 设置 或 返回 按钮 的 Tab 键 控 制 次 序 。 打 开 页 面 ， 连 续 按 下 Tab 键 ， 会 在 
按钮 之 间 切 换 ，tabIndex 属性 则 可 以 记录 显示 切换 的 顺序 。 
【 例 2.28】 使 用 tabIndex 属性 的 实例 〈 实 例文 件 : ch02\2.28.html) 


<html> 

<head> 

<script type="text/JavaScript"> 

function showTabIndex() 

1 

var btl=document.getElementById(btl).tabIndex: 

var bt2=document.getElementById(bt2'").tabIndex: 

var bt3=document.getElementById(bt3'").tabIndex: 
document.write("Tab 切换 按钮 1 的 顺序 :" + bt]); 
document.write("<br />"); 

document.write("Tab 切换 按钮 2 的 顺序 : "+ bt2); 
document.write("<br />"); 

document.write("Tab 切换 按钮 3 的 顺序 : " + bt3); 
}</script> 

</head> 

<body> 

<button id="bt1" tabIndex="1"> 按 钮 1</button><br /> 
<button id="bt2" tabIndex="2"> 按 钮 2</button><br /> 
<button id="bt3" tabIndex="3"> 按 钮 3</button><br /> 
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<br/> 
<input type="button" onclick="showTabIndex0" value=" 显 示 切 换 顺 序 " /> 
</body> 
</html> 


使 用 正 9.0 浏览 器 查看 网 页 内 容 , 打开 后 多 次 按 下 Tab 键 , 使 控制 中 心 在 几 个 按钮 对 象 间 
切换 ， 如 图 2-28 所 示 。 


人 HAUsersAdminist P - © X | @ HusersAdministr| 


文件 (月 ” 编 强 (E) 。 豆 看 (V) 收 毫 闪 (A) 工具 (D) 者 动 (H) 


显示 切换 顺序 


图 2-28 程序 运行 结果 
单 击 “显示 切换 顺序 ”按钮 ， 显 示 出 依次 切换 的 顺序 ， 如 图 2-29 所 示 。 


€] HAUsersAdminist PD -~ © X | @ HAUsersAdministr, 
文件 (站 ”六 强 (E) 下 看 (V) 收藏 关 (A) 工具 (T) 大 动 (H) 
Tab 切 换 按钮 1 的 顺序 : 1 


Tab 切 换 按钮 2 的 顺序 : 2 
Tab 切 换 按钮 3 的 顺序 :3 


图 2-29 程序 运行 结果 


2.5 ”新 增 的 其 他 属性 


新 增 属性 主要 分 为 三 大 类 : 表单 相关 的 属性 、 链 接 相 关 属 性 和 其 他 新 增 属性 。 
2.5.1 表单 相关 的 属性 
新 增 的 表单 属性 有 很 多 ， 下 面 来 分 别 进行 介绍 。 
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1. autocomplete 


autocomplete 属性 规定 form 或 input 域 应 该 拥有 自动 完成 功能 ,autocomplete 适用 于 <form> 
标签 , 以 及 以 下 类 型 的 <input> 标 签 : text、 search、 url、 telephone、email、 password、datepickers、 
Iange 以 及 color。 


【 例 2.29】 使 用 autocomplete 属性 的 实例 〈 实 例文 件 : ch02\2.29.html) 


<!DOCTYPE HIML> 
<html> 
<body> 
<form action="demo form.asp" method="get" autocomplete="on"> 
姓名 :<input type="text" name=" 姓 名 " /><br /> 
性 别 :<input type="text" sex=" 性 别 " /><br /> 
邮箱 :<input type="email" name="email" autocomplete="off' /><br /> 
<input type="submit" /> 
</form> 
</body> 
</html> 


使 用 正 9.0 浏览 器 查看 网 页 内 容 ， 如 图 2-30 所 示 。 


0 [Eee 区 司 
EAD hb\u:erswdninis p - © x | 人 hu:erewdmiistr 
文件 (。 六 强 E) 和 看 (V)。 收 羡 穴 (A) ”工具 帮助 (H) 
姓名 : 

性 别 : 


提交 查询 内 容 


图 2-30 程序 运行 结果 
2. autofocus 
autofocus 属性 规定 在 页 面 加 载 时 ， 域 自动 地 获得 焦点 。autofocus 属性 适用 于 所 有 <input> 
标签 的 类 型 。 
【 例 2.30】 使 用 autofocus 属性 的 实例 《实例 文件 : ch02\2.30.html) 


<!DOCTYPE HIML> 

<html> 

<body> 

<form action="demo form.asp" method="get"> 


»43* 
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用 户 名 :<input type="text" name="user name" autofocus="autofocus" /> 
<input type="submit" /> 
</form> 
</body> 
</html> 


使 用 下 9.0 浏览 器 查看 网 页 内 容 ， 如 图 2-31 所 示 。 


人 过 此 ] HAUsersAdminist PD - © X | Hi\Users\Admini: 
文件 (月 ”编辑 (E) ” 坦 看 (V) ” 收 茂 夫 ( 内 工具 (TD) 帮助 (H) 


用 户 名 : 


图 2-31 程序 运行 结果 
3. form 


form 属性 规定 输入 域 所 属 的 一 个 或 多 个 表单 。form 属性 适用 于 所 有 <input> 标 签 的 类 型 ， 
必须 引用 所 属 表单 的 id。 
【 例 2.31】 使 用 form 属性 的 实例 《实例 文件 : ch02\2.31.html) 


<!DOCTYPE HIML> 
<html> 
<body> 
<form action="demo form.asp" method="get" id="user form"> 
姓名 :<input type="text" name=" 姓 名 " /> 
<input type="submit" /> 
</form> 
性 别 :<input type="text" sex=" 性 别 " form="user_form" /> 
</body> 
</html> 


使 用 正 9.0 浏览 器 查看 网 页 内 容 ， 如 图 2-32 所 示 。 
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[ee- 
KE 已] HNUsersAdminist D - © X | @ HANusersAdmini 
文件 (月 ” 编 强 (E) ”可 看 (V) ” 收 荡 闪 (A) 工具 (TD) 帮助 (H) 


姓名 : 
性 别 : 


\ 


图 2-32 程序 运行 结果 
4. form overrides attributes 


表单 重 写 属性 (form override attributes) 允许 重 写 form 元 素 的 某 些 属性 设 定 。 
表单 重 写 属性 如 下 。 


@ formaction: 重 写 表单 的 action 属性 
formenctype: 重 写 表单 的 enctype 属性 
formmethod: 重 写 表 单 的 method 属性 
formnovalidate: 重 写 表 单 的 novalidate 属性 
formtarget: 重 写 表单 的 target 属性 


表单 重 写 属性 适用 于 以 下 类 型 的 <input> 标 签 : submit 和 image。 
【 例 2.32】 使 用 form overrides 属性 的 实例 《〈 实 例文 件 : ch02\2.32.html) 


<!DOCTYPE HIML> 
<html> 
<body> 
<form action="demo_form.asp" method="get" id="user form"> 
邮箱 :<input type="email" name="userid" /><br /> 
<input type="submit" value=" 提 交 " /><br /> 
<input type="submit" formaction="demo_admin.asp" value=" 以 管理 员 身 份 提交 " /><br /> 
<input type="submit" formnovalidate="true" value=" 提 交 未 经 验证 " /><br /> 
</form> 
</body> 
</html> 


使 用 正 9.0 浏览 器 查看 网 页 内 容 ， 如 图 2-33 所 示 。 
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|] HAUsersAdminist D - © X | @ Hi\UsersAdmini: 


查看 (V) ”收藏 闪 (A) 工具 (D) 帮助 (H) 


以 管理 员 身份 提交 
提交 未 经 验证 


图 2-33 程序 运行 结果 
5. height 和 width 


height 和 width 属性 用 于 规定 image 类 型 的 input 标签 的 图 像 高 度 和 宽度 。 
【 例 2.33】 使 用 height 和 width 属性 的 实例 〈 实 例文 件 : ch02\2.33.html) 


<!DOCTYPE HIML> 
<html> 
<body> 
<form action="demo form.asp" method="get"> 
用 户 名 :<input type="text" name="user_name" /><br /> 
<input type="image" src="/images/ 按 钮 jpg" width="99" height="99" /> 
</form> 


</body> 
</html> 


使 用 正 9.0 浏览 器 查看 网 页 内 容 ， 如 图 2-34 所 示 。 


和 HAUsersAdminist D -6 X | @ HUsersAdministr., 
文件 月 。 编 济 (E) 至 看 V) 。 收 巷 闪 (A。 工具 (T) 才 动 (H) 
用 户 名 : 


2-34 ”程序 运行 结果 
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6. list 


list 属性 规定 输入 域 的 datalist。datalist 是 输入 域 的 选项 列表 。list 属性 适用 于 以 下 类 型 的 
<input> 标 签 : text、search、url、telephone、email、date pickers、number、range 以 及 color。 


【 例 2.34】 使 用 list 属性 的 实例 〈 实 例文 件 ， ch02\2.34.html) 


<!DOCTYPE HIML> 
<html> 
<body> 
<form action="demo form.asp" method="get"> 
主页 :<input type="url" list="url list" name="link" /> 
<datalist id="url list"> 
<option label="baisu" value="http://www.baidu.com" /> 
<option label="qq" value="http://www.qq.com" /> 
<option label="Microsoft" value="http://www.microsoft.com" /> 
</datalist> 
<input type="submit" /> 
</form> 


</html> 
使 用 正 9.0 浏览 器 查看 网 页 内 容 ， 如 图 2-35 所 示 。 


Ee 


HN AN 
ja Hvser administ P - OX | @ HAUsersAdministd 
文件 (月 ”六 辑 (E) ” 吾 看 (V) ”收藏 夫 (A) ”工具 (T) 帮助 (H) 


主页 : 提交 查询 内 容 


图 2-35 程序 运行 结果 
7. max、min 和 step 
max、min 和 step 属性 用 于 为 包含 数字 或 日 期 的 input 类 型 规定 限定 (约束 ) 。max 属性 
规定 输入 域 所 允许 的 最 大 值 ，min 属性 规定 输入 域 所 允许 的 最 小 值 ，step 属性 为 输入 域 规定 合 
法 的 数字 间隔 (如 果 step="3"， 则 合法 的 数 是 -3,0,3,6 等 ) 。 
max、min 和 step 属性 适用 于 以 下 类 型 的 <input> 标 签 : date pickers、number 以 及 range。 
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【 例 2.35】 使 用 min、max 和 step 属性 的 实例 〈 实 例文 件 : ch02\2.35.html) 。 


<!DOCTYPE HIML> 
<html> 
<body> 
<form action="demo form.asp" method="get"> 
成 绩 :<input type="number" name="points" min="0" max="10" step="3"/> 
<input type="submit" /> 
</form> 
</body> 
</html> 


使 用 下 9.0 浏览 器 查看 网 页 内 容 ， 如 图 2-36 所 示 。 


= een 
区 用 > ) HAUsersAdminist D ~ © X | @ Hi\UsersAdmin 
文件 (月 ”编辑 (E) ”各 看 (V) ”收藏 夫 (A) ”工具 (T) ”帮助 (H) 


成 绩 : 提交 查询 内 容 


图 2-36 程序 运行 结果 
8. multiple 


multiple 属性 规定 输入 域 中 可 选择 多 个 值 。multiple 属性 适用 于 以 下 类 型 的 <input> 标 签 : 
email 和 file。 
【 例 2.36】 使 用 multiple 属性 的 实例 〈 实 例文 件 : ch02\2.36.html) 。 


<!DOCTYPE HIML> 
<html> 
<body> 
<form action="demo _form.asp" method="get"> 
选择 图 片 :<input type="file" name="img" multiple="multiple" /> 
<input type="submit" /> 
</form> 
</body> 
</html> 


使 用 正 9.0 浏览 器 查看 网 页 内 容 ， 如 图 2-37 所 示 。 
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区 中 
(eo 国 HAUsersAdminist D - CX 有 | 大 Hausersadmin 
文件 站 ” 状 沪 (E) 各 看 (V) 效 肆 闪 (A) 工具) 大 红 (H) 
选择 图 片 : 

提交 查询 内 容 


图 2-37 程序 运行 结果 


【六 单 击 “ 浏 览 ”按钮 ， 可 以 打开 “选择 要 加 载 的 文件 ”对 话 框 ， 在 其 中 选择 要 添加 


提 示 


标签 : 


的 图 片 信息 。 


9. pattern (regexp) 
pattern 属性 规定 用 于 验证 input 域 的 模式 (pattern) .pattern 属性 适用 于 以 下 类 型 的 <input> 


text、search、url、telephone、email 以 及 password。 
【 例 2.37】 使 用 pattern 属性 的 实例 《实例 文件 :ch02\2.37.html) 


<!DOCTYPE HIML> 
<html> 
<body> 
<form action="demo_form.asp" method="get"> 
电话 区 号 :<input type="text" name="country_code" pattern="[A-z]{3}" 
title="Three letter country code" /> 
<input type="submit" /> 
</form> 


</body> 
</html> 


使 用 正 9.0 浏览 器 查看 网 页 内 容 ， 如 图 2-38 所 示 。 


全 了 国 HAUsersAdminist P - © X | @ HNuserswdmir 


文件 (月 ”六 强 (E) 各 看 (V) 收藏 闪 (A) 工 只 (T)。 帮助 (H) 


电话 区 号 ， 


2-38 ”程序 运行 结果 
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10. placeholder 


placeholder 属性 提供 一 种 提示 (hint) ， 描 述 输入 域 所 期 待 的 值 。placeholder 属性 适用 于 
以 下 类 型 的 <input> 标 签 : text、search、url、telephone、email 以 及 password。 
【 例 2.38】 使 用 Placeholder 属性 的 实例 〈 实 例文 件 : ch02\2.38.html) 


<!DOCTYPE HIML> 

<html> 

<body> 

<form action="demo form.asp" method="get"> 
<input type="search" name="user search" placeholder="baidu" /> 
<input type="submit" /> 

</form> 

</body> 

</html> 


使 用 正 9.0 浏览 器 查看 网 页 内 容 ， 如 图 2-39 所 示 。 


有 Es 
3 | Husersadminist p - © x | @ Husersadmin 


文件 (F) ” 妨 罚 (E) ”可 看 (V) 收藏 闪 (A) 工具 人 T) 帮助 (H) 


图 2-39 程序 运行 结果 
11. required 


required 属性 规定 必须 在 提交 之 前 填写 输入 域 (不 能 为 空 ) 。required 属性 适用 于 以 下 类 
型 的 <input> 标 签 : text、 search、 url、 telephone、 email、 password、 date pickers、number、checkbox、 
Iadio 以 及 file。 

【 例 2.39】 使 用 required 属性 的 实例 《实例 文件 : ch02\2.39.html) 


<!DOCTYPE HIML> 
<html> 
<body> 
<form action="demo form.asp" method="get"> 
姓名 :<input type="text" name="usr_name" required="required" /> 
<input type="submit" /> 
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</form> 


</body> 
</html> 


使 用 正 9.0 浏览 器 查看 网 页 内 容 ， 如 图 2-40 所 示 。 


A 全 和 HAUsersAdminist 训 OX 站 Hi\Users\Admin 
文件 (站 ”编辑 (E) ”前 春 (V) ”收藏 夫 (A) 工具 (T) 帮助 (H) 


姓名 : 提交 查询 和 内容 


图 2-40 程序 运行 结果 
2.5.2 ”链接 相关 属性 
下 面 介绍 新 增 的 与 链接 相关 的 属性 。 
1. media 属性 


media 属性 规定 目标 URL 是 为 哪 种 类 型 的 媒介 /设备 进行 优化 的 ， 只 能 在 href 属性 存在 时 
使 用 。 
【 例 2.40】 使 用 media 属性 的 实例 实例 文件 ，ch02\2.40.html) 


<“IDOCTYPE HIML> 
<html> 
<body> 
<a href="www.baidu.com" media="print and (resolution:300dpiD)"> 
链接 查询 . 
</a> 
</body> 
</html> 


使 用 正 9.0 浏览 器 查看 网 页 内 容 ， 如 图 2-40 所 示 。 
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pa A en 
全 全 国 HAUsersAdminist P -CE X | @ Husersadmin 
文件 (站 舌 久 (5) 豆 看 (V) 收藏 夫 (A】 工具 (T) 帮助 (H) 


链接 查询 . 


图 2-41 程序 运行 结果 
2.type 属性 


在 HIML 5 中 ， 为 area 元 素 增加 了 type 属性 ， 规 定 目标 URL 的 MIME 类 型 。 仅 在 href 
属性 存在 时 使 用 。 
语法 结构 如 下 : 


<input type="value"> 
3. sizes 


为 link 元 素 增加 了 新 属性 sizes。 该 属性 可 以 与 icon 元 素 结合 使 用 (通过 rel 属性 ) ， 该 
属性 指定 关联 图 标 (icon 元 素 ) 的 大 小 。 


4.target 


为 base 元 素 增加 了 target 属性 ， 主 要 目的 是 保持 与 a 元素 的 一 致 性 。 
【 例 2.41】 使 用 sizes 与 target 属性 的 实例 〈 实 例文 件 : ch02\2.41.html) 


<!DOCTYPE html> 
<html> 
<head> 
<link rel="icon" href="demo _icon.ico" type="image/gif" sizes="16x16" /> 
</head> 
<body> 
<h2>Hello world!</h2> 
<p> 打 开 <a hre 伍 "2.40.html" target="” blank"> 新 链接 </a> 窗 口 。</p> 
</body> 
</html> 


使 用 正 9.0 浏览 器 查看 网 页 内 容 ， 如 图 2-42 所 示 。 
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[Cete-ees 
= HUsersAdminist PD -CE X | EH\UsersAdmi 
文件 (有 ” 编 贺 (E) ”可 看 (V) 收藏 闪 (A) ”工具 (TD) ”帮助 (H) 


Hello world! 
打开 新 链接 窗口 。 


图 2-42 程序 运行 结果 
2.5.3 ”其 他 属性 
除了 以 上 介绍 的 与 表单 和 链接 相关 的 属性 外 ，HTML 5 还 增加 了 其 他 属性 ， 如 下 表 所 示 。 


TI 


charset meta 元 素 为 文档 字符 编码 的 指定 提供 一 种 比较 良好 的 方式 


让 菜单 可 以 以 上 下 文 菜单 、 工 具 条 与 列表 菜单 的 三 种 形式 出 现 


为 菜单 定义 可 见 的 标注 

scoped style 元 素 用 来 规定 样式 的 作用 范围 ， 壁 如 只 对 页 面 上 某 个 树 起 作用 
让 
本 和 开发 离线 Web 应 用 程序 时 与 API 结合 使 用 ， 定 义 一 个 URL， 在 这 
个 URL 上 描述 文档 的 缓存 信息 
sandbox 、 srcdoc 与 


seamless 


iame 元 素 用 来 提高 页 面 安全 性 ， 防 止 不 信任 的 Web 页 面 执行 某 些 操作 


2.6 ”废除 的 属性 


在 HTML 5 中 废除 了 很 多 不 需要 再 使 用 的 属性 ， 这 些 属性 将 采用 其 他 属性 或 其 他 方案 进 
行 末代 ， 具 体内 容 如 下 表 所 示 。 


废除 的 属性 使 用 该 属性 的 元 素 在 HTML 5 中 代替 的 方案 


FI CI 


ET 
[amwam EE | 
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( 续 表 ) 
废除 的 属性 使 用 该 属性 的 元 素 在 HTML 5 中 代替 的 方案 
Nohref area 多 余 属 性 ， 被 省 略 
profile head 多 余 属 性 ， 被 省 略 
version html 多 余 属 性 ， 被 省 略 
name img id 
scheme meta 只 为 某 个 表单 域 使 用 scheme 


archive,classid,codebase, 


使 用 data 与 type 属性 类 调用 插件 ,需要 使 用 这 些 属 


codetype,declare,standb | object i 
性 来 设置 参数 时 ， 使 用 param 属性 


和 
valuetype,type param 使 用 name 与 value 属性 ， 不 声明 值 的 MIME 类 型 
使 用 以 明确 简洁 的 文字 开头 ， 后 跟 详 述 文字 的 形 
势 。 
axis,abbr td,th es 了 | 
可 以 对 更 详细 的 内 容 使 用 title 属性 ， 来 使 单元 格 的 
内 容 变 得 简短 
scope td 在 被 链接 的 资源 中 使 用 HTTP Content-type 头 元 素 
caption,input,legend, Ne 
align . 使 用 CSS 样式 表 进行 替代 
div,hl1,h2,h3,h4,h5,h6,p 
alink,link,text,vlink,back 2 
body 使 用 CSS 样式 表 进行 替代 
ground,bgcolor 
align,bgcolor,border,cell 
padding,cellspacing, table 使 用 CSS 样式 表 进行 替代 
frame,rules,width 
align,char,charoff,height a 
| tbody,thead,tfoot 使 用 CSS 样式 表 进 行 替代 
,nowrap,valign 
align,bgcolor,char,charof 
fheight,nowrap， td,th 使 用 CSS 样式 表 进行 替代 
valign,width 
align,bgcolor,char,charof ae 本 
0 tr 使 用 CSS 样式 表 进 行 替代 
f,valign 
align,char,charofft,valign 本 ;站 
col,colgroup 使 用 CSS 样式 表 进行 替代 
,width 
align,border,hspace,vspa NE 人 
object 使 用 CSS 样式 表 进行 替代 
ce 
clear br 使 用 CSS 样式 表 进 行 替 代 
compact,type olLulli 使 用 CSS 样式 表 进 行 替 代 
compact d 使 用 CSS 样式 表 进 行 替代 
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( 续 表 ) 
废除 的 属性 使 用 该 属性 的 元 素 在 HTML 5 中 代替 的 方案 
Compact menu 使 用 CSS 样式 表 进 行 替代 
width pre 使 用 CSS 样式 表 进 行 替代 
align,hspace,vspace img 使 用 CSS 样式 表 进 行 替 代 
align,noshade,size,width | hr 使 用 CSS 样式 表 进 行 奉 代 
align,frameborder,scrolli 
ngmarginheight, iframe 使 用 CSS 样式 表 进 行 替 代 
marginwidth 
autosubmit menu 


2.7 ”问题 解答 


1. HTML 5 中 的 单 标记 和 双 标 记 书写 方法 是 什么 ? 

HTML 5 中 的 标记 分 为 单 标记 和 双 标记 。 所 谓 单 标记 是 指 没有 结束 标记 的 标签 ， 双 标记 是 
指 既 有 开始 标记 又 有 结束 标记 的 标签 。 

对 于 单 标记 不 允许 写 结束 标记 的 元 素 ， 只 允许 使 用 “< 元 素 />” 的 形式 进行 书写 。 例 如 
“<br>...</br>” 的 书写 方式 是 错误 的 ， 正 确 的 书写 方式 为 <br/>。 当 然 ， 在 HTML 5 之 前 的 版 
本 中 <br> 这 种 书写 方法 可 以 被 沿用 。HTML 5 中 不 允许 写 结束 标记 的 元 素 有 : area、base、br 、 
col、 command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。 

对 于 部 分 双 标 记 可 以 省 略 结 束 标记 。HTML 5 中 允许 省 略 结束 标记 的 元 素 有 li、 dt、 dd、 p、 
rt、 rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、t 了 th。 

HTML 5 中 有 些 元 素 还 可 以 完全 被 省 略 。 即 使 这 些 标记 被 省 略 了 ， 该 元 素 还 是 以 隐 式 的 方 
式 存在 的 。HTML 5 中 允许 省 略 全 部 标记 的 元 素 有 : html、head、body、colgroup、tbody。 

2. 新 增 属性 Target 在 HIML 4.01 与 HTML 5 之 间 的 差异 有 哪些 ? 

在 HIML 5 中 ,不 再 允许 把 框架 名 称 设 定 为 目标 ， 因 为 不 再 支持 frame 和 frameset。Self、 
parent 以 及 top 这 三 个 值 大 多 数 时 候 与 过 ame 一 起 使 用 。 
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在 高 速 发 展 的 今天 ,网 站 已 经 成 为 展示 自我 , 宣传 自我 的 工具 。 公 司 或 个 人 可 以 拥有 自己 
的 网 站 ， 可 以 向 别人 介绍 自己 ， 展 示 自 己 ， 这 些 都 离 不 开 HTML 网 页 。 


3.1 网 站 的 基本 概念 


当 进 入 一 个 网 站 时 ， 首 先 呈 现 出 来 的 就 是 网 页 ， 网 页 是 承载 各 种 网 站 信息 的 平台 。 网 页 上 
可 以 有 图 片 、 文 字 、 音 频 和 视频 等 构成 网 站 的 基本 元 素 ， 


3.1.1 什么 是 网 页 


网 页 (Web page) 是 一 个 文件 ， 它 存放 在 计算 机 中 ， 而 这 部 计算 机 必须 是 与 互联 网 相连 
的 。 网 页 是 由 网 址 (URL, 例如 www.sohu.com) 来 识别 与 存 取 的 ， 当 在 浏览 器 中 输入 网 址 后 ， 
网 页 文件 会 被 传送 到 正在 浏览 网 页 的 计算 机 中 , 然后 再 通过 浏览 器 对 网 页 内 容 进行 解释 , 再 展 
示 给 网 页 浏览 者 ， 网 页 通常 是 HTML 格式 (文件 扩展 名 为 .html 或 .htm) 。 

在 一 个 网 站 中 ， 网 页 按照 类 型 不 同 ， 可 以 分 为 两 种 ， 主 页 和 普通 网 页 。 主 页 (Home Page) 
是 进入 网 站 的 开始 画面 ， 如 搜狐 网 站 的 首页 ， 如 图 3-1 所 示 。 


图 3-1 搜狐 网 站 主页 


3.1.2 什么 是 网 站 

网 站 (Website) 是 指 根据 一 定 的 规则 ， 使 用 HTML 等 工具 制作 的 用 于 展示 特定 内 容 的 相 
关 网 页 的 集合 ， 例 如 常见 的 网 站 有 搜狐 、 新 浪 等 。 

简单 地 说 ， 网 站 就 像 布告 栏 一 样 ， 人 们 可 以 通过 网 站 发 布 资讯 信息 ， 或 者 利用 网 站 提供 的 
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相关 的 网 络 服务 。 衡 量 网 站 的 性 能 通常 从 网 站 空间 大 小 、 网 站 位 置 、 网 站 连接 速度 〈 俗 称 “ 网 
速 ” )、 网 站 软件 配置 、 网 站 提供 的 服务 等 几 方 面 考虑 ,最 直接 的 衡量 标准 是 网 站 的 真实 流量 。 


3.2 ”网 页 基本 构成 元 素 


在 早期 ， 网 站 只 能 保存 单纯 文本 。 经 过 不 断 地 发 展 ， 图 像 、 声 音 、 动 画 、 视 频 和 3D 技术 
等 已 经 在 因特网 上 广泛 应 用 , 并 且 通 过 动态 网 页 技术 , 用 户 可 以 与 其 他 用 户 或 者 网 站 管理 者 进 
行 交流 。 

常见 的 网 页 构成 元 素 有 文本 、 图 像 、 超 链接 、 表 格 、 表 单 、 导 航 栏 、 动 画 、 框 架 等 ， 如 图 
3-2 所 示 。 


人 之 

友基 FD 于 多 习 六 2 必要 和 从 和 
点 新闻 : 

-明天 册 肛 “ 提 地 考 RA 
“RA 

TT TT TT 
TT 


图 3-2 网 页 常见 构成 元 素 

@ 文本 : 网 页 中 的 信息 主要 以 文本 为 主 。 在 网 页 中 可 以 通过 字体 、 大 小 、 闫 色 、 底 纹 、 
边框 等 来 设计 文本 的 属性 。 

@ 图 像 : 有 了 图 像 ， 才 能 看 到 丰富 多 彩 的 网 页 。 网 页 上 图 片 多 为 JPG 或 GIF 格式 。 通 常 
图 片 会 被 运用 在 Logo、Banner 和 背景 图 上 。Logo 是 代表 企业 形象 或 栏目 内 容 的 标志 
性 图 片 ， 一 般 在 网 页 的 左上 角 。Banner 是 用 于 宣传 网 站 内 某 个 栏目 或 活动 的 广告 ， 一 
般 要 求 制作 成 动画 形式 ， 达 到 宣传 的 效果 。Banner 一 般 位 于 网 页 的 顶部 和 底部 。 在 网 
页 页面 中 比较 常用 的 图 片 还 包括 背景 图 ， 但 要 慎 用 。 

@ 超 链接 : 超 链接 是 网 站 的 灵魂 ， 从 一 个 网 页 指向 另 一 个 目的 端的 链接 。 目 的 端 通常 是 
一 个 网 页 ， 但 也 可 以 是 一 幅 图 片 、 一 个 电子 邮件 地 址 、 一 个 文件 、 一 个 程序 或 者 是 本 
网 页 中 的 其 他 位 置 ， 超 链接 本 身 可 以 是 文字 或 者 图 片 。 

@ 表格 : 是 网 页 中 展现 数据 的 主要 方式 ， 能 够 以 表 的 形式 显示 数据 信息 。 表 格 也 可 以 用 
作 网 页 排版 ， 在 很 长 一 段 时 间 内 ， 使 用 表格 排版 是 网 站 的 首选 方式 。 

@ 表单 : 表单 是 用 来 收集 站 点 访问 者 信息 的 集合 。 站 点 访问 者 填写 表单 的 方式 是 输入 文 
本 、 单 击 单 选 按 钮 与 复 选 框 ， 以 及 从 下 拉 菜 单 中 选择 选项 。 在 填 好 表单 后 ， 站 点 访问 
者 便 送 出 所 输入 的 数据 ， 该 数据 就 会 根据 网 站 设计 者 所 设置 的 表单 处 理 程序 ， 以 各 种 
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不 同 的 方式 进行 处 理 。 

@ 导航 栏 : 导航 栏 是 一 组 超 链接 ， 一 般 用 于 网 站 各 部 分 内 容 间 相 互 链接 的 指引 。 导 航 栏 
可 以 是 按钮 或 者 文本 超 链接 。 

@@ 动画 : 动画 是 网 页 上 最 活跃 的 元 素 ， 包 括 GIF 动画 和 Flash 动画 。 


0! 网 页 中 除了 这 些 最 基本 元 素 外 ， 还 包括 横幅 广告 、 字 幕 、 是 停 按 钮 、 计 数 器 、 音 
提示 频 和 视频 等 。 
\ 


3.3 网 页 设计 


网 页 设计 , 是 网 站 建设 行业 内 的 专业 术语 , 作为 客户 , 若 能 了 解 更 多 的 网 站 设计 基础 知识 ， 
在 进行 网 站 建设 过 程 中 就 不 会 显得 被 动 、 无 助 ,而 且 能 更 好 地 与 项 目 负责 人 进行 沟通 交流 ， 以 
满足 自己 的 设计 需求 。 


3.3.1 网 页 设计 概述 


网 页 设计 是 网 页 创作 过 程 ， 是 建立 在 Intemet 上 的 新 型 设计 。 它 具有 很 强 的 视觉 效果 、 互 
动 性 、 互 操作 性 等 其 他 媒体 所 不 具有 的 特点 。 
-个 成 功 的 网 页 设计 ， 首 先 在 观念 上 要 确立 动态 的 思维 方式 ， 其次， 要 有 效 地 将 图 形 引入 
网 页 中 , 增加 入 们 浏览 网 页 的 兴趣 , 在 崇尚 鲜明 个 性 风格 的 今天 , 网 页 设计 应 增加 个 性 化 因素 。 
例如 搜狐 网 页 中 的 视频 网 站 地 图 ， 如 图 3-3 所 示 。 


图 3-3 视频 地 图 显示 


网 页 设计 融合 了 IT 技术 与 美术 设计 两 个 方面 。 因此 ,对 从 业 人 员 来 说 , 仅 掌握 IT 技术 是 
不 够 的 ， 还 需要 有 一 定 的 美术 功底 与 审美 能 力 。 而且， 网 页 设计 傻瓜 软件 正在 日 益 普及 , 技术 
早已 不 是 这 个 领域 的 唯一 门槛 。 在 这 种 情况 下 , 美术 功底 和 审美 能 力 是 决定 成 为 什么 级 别 的 网 
页 设计 师 的 关键 因素 。 
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3.3.2 ”网 页 设计 特点 
网 页 设计 有 下 面 几 个 特点 。 
1. 交互 性 与 持续 性 


网 页 被 创建 出 来 后 ， 上 传 到 网 站 ， 读 者 就 可 以 浏览 和 欣赏 了 。 通 常 为 了 吸引 读者 注意 ， 需 
要 定时 的 更 新 网 页 内 容 ， 例 如 更 新 新 闻 、 股 票 信息 等 。 在 更 新 过 程 中 ， 其 版 面 设计 可 能 会 由 于 
内 容量 的 多 少 ， 版 面 发 生变 化 ， 这 时 就 需要 网 页 设计 者 保持 一 个 连续 的 设计 风格 。 

有 的 网 页 为 了 及 时 获取 最 新 与 论 信息 , 通常 都 存在 HTML 留言 表单 。 浏 览 者 登录 网 页 后 ， 
发 布 自己 的 言论 信息 。 面 对 每 天 都 在 增长 的 评论 内 容 , 网 页 设计 者 也 需要 保持 一 个 版 面 的 设计 
风格 。 例 如 下 面 页 面 ， 对 某 一 主题 ， 浏 览 者 在 不 同时 间 进 行 评 论 ， 内 容 不 断 增多 ， 但 其 版 面 效 
果 不 会 发 生变 化 ， 如 图 3-4 所 示 。 


图 3-4 发 表 评论 


有 的 网 站 在 使 用 了 一 段 时 间 , 其 风格 不 再 吸引 人 ,这 时 就 面临 着 整个 网 站 的 改版 问题 相 
对 于 前 面 网 站 不 能 变化 太 大 ， 也 需要 保持 视觉 形象 上 的 持续 性 。 

与 报纸 等 传统 传媒 布局 设计 相 比 较 ,可 以 发 现 , 报纸 排版 完成 后 只 需 出 版 , 不 再 具有 重新 
排版 布局 的 可 能 ， 而 网 页 不 一 样 ， 由 于 需要 和 浏览 者 不 断交 互 ， 需 要 不 断 排版 和 布局 ， 甚 至 每 
隔 一 定时 间 ， 还 需要 版 本 升级 。 


2. 多 维 性 


HMTL 网 页 最 吸引 人 之 处 ， 就 是 存在 超级 链接 。 正 是 因为 有 了 超级 链接 ， 浏 览 者 才 可 以 
在 不 同 页 面 之 间 ， 任 意 跳 转 。 可 以 想象 ， 如 果 HTML 网 页 ， 没 有 了 超级 链接 ， 那 只 能 按 看 图 
书 的 方式 浏览 网 页 ， 首 先 在 目录 中 找到 这 个 网 页 地 址 ， 然 后 再 看 ， 看 完了 再 返回 去 。 超 级 链接 
的 出 现 , 大 大 丰富 了 页 面 之 间 的 联系 。 超 级 链接 可 以 将 页 面 组 织 结构 分 为 序列 结构 、 层 次 结构 、 
网 状 结构 、 复 合 结构 等 。 例 如 百度 首页 ， 就 是 层次 结构 ， 单 击 页 面 任意 一 个 超级 链接 ， 可 以 进 
入 此 类 网 页 查看 ， 如 图 3-5 所 示 。 
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图 3-5 百度 网 站 首页 

网 站 中 ， 一 个 合理 的 页 面 导航 可 以 帮助 浏览 者 迅速 找到 目标 网 页 。 导 航 需要 提供 足够 的 、 
不 同 角度 的 链接 ， 帮 助 浏览 者 在 网 页 各 个 部 分 跳 转 , 并 告知 浏览 者 所 在 位 置 、 当 前 页 面 和 其 他 
页 面 之 间 的 关系 等 。 通 过 超级 链接 ， 可 以 链接 到 不 同 页 面 ， 这 就 是 网 页 设计 的 多 维 性 特点 。 

3. 多 种 媒体 综合 

在 创建 网 页 时 ， 不 仅仅 要 考虑 文本 元 素 ， 还 需要 考虑 图 像 、 音 频 和 视频 等 元 素 ， 只 有 这 样 
才能 将 网 页 设计 的 动感 十 足 。 随 着 硬件 技术 的 提高 ， 例 如 网 络 带宽 增加 、 芯 片 处 理 速度 等 ， 将 
来 还 需要 考虑 3D 元 素 增 加 。 在 数据 压缩 技术 的 改进 和 流 技术 的 推动 下 ， 网 上 出 现 了 实时 的 音 
频 和 视频 服务 ， 例 如 在 线 音 乐 、 网 上 电影 等 ， 如 图 3-6 所 示 。 
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图 3-6 迅雷 网 站 首页 
多 种 媒体 综合 运用 是 网 页 设计 的 特点 之 一 ， 也 是 网 页 设计 者 必须 要 考虑 的 元 素 之 一 。 
4. 版 式 不 可 控 性 


网 页 版 式 设计 存在 许多 不 可 控 因 素 ,首先 网 页 设计 者 创建 的 网 页 ,在 不 同 的 浏览 器 运行 时 ， 
可 能 会 存在 差异 。 其 次 ， 网 页 技术 在 不 断 发 展 ， 如 有 一 个 网 站 ， 在 Firefox 浏览 器 中 显示 ， 如 
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图 3-7 所 示 。 可 以 发 现 图 片 周 边区 域 间隔 比较 大 ， 但 在 正 浏览 器 中 会 发 现 ， 图 片 四 周 没有 间 
除 ， 如 图 3-8 所 示 。 


TTTE 


图 3-7 用 Firefox 浏览 器 显示 图 3-8 用 正 浏 览 器 显示 


这 一 切 说 明 ， 网络 应 用 尚 处 在 发 展 之 中 ,很 难 制订 出 统一 的 标准 ,必然 导致 网 页 版 式 设计 
的 不 可 控 性 。 其 具体 表现 为 : 


@ 网 页 页 面 会 根据 当前 浏览 器 窗口 大 小 ， 自 动 格式 化 输出 。 

@ 网 页 浏览 者 可 以 控制 网 页 在 浏览 器 中 的 显示 方式 。 

@ 用 不 同 种 类 、 版 本 的 浏览 器 观察 同一 个 网 页 页 面 时 ， 效 果 会 有 所 不 同 。 
@ 用 户 浏览 器 工作 环境 不 同 ， 显 示 效 果 也 会 有 所 不 同 。 


把 所 有 这 些 问题 归结 为 一 点 , 即 网 页 设计 者 无 法 控制 页 面 在 用 户 端的 最 终 显示 效果 , 但 这 
也 正 是 网 页 设计 的 吸引 人 之 处 。 

5. 技术 与 艺术 结合 的 紧密 性 

设计 是 主观 和 客观 共同 作用 的 结果 , 是 在 自由 和 不 自由 之 间 进 行 的 , 设计 者 不 能 超越 自身 
已 有 经 验 和 所 处 环境 提供 的 客观 条 件 限制 ,优秀 设计 者 正 是 在 掌握 客观 规律 基础 上 得 到 了 完全 
的 自由 ， 拥 有 了 想象 和 创造 的 自由 。 

在 网 页 设计 的 过 程 中 , 网络 技 术 主要 表现 为 客观 因素 ， 艺 术 创意 主要 表现 为 主观 因素 ,网 
页 设计 者 应 该 积极 主动 地 掌握 现 有 的 各 种 网 络 技术 规律 , 注重 技术 和 艺术 紧密 结合 , 这 样 才 能 
穷尽 技术 之 长 ， 实 现 艺术 想象 ， 满 足 浏 览 者 对 网 页 信息 的 高 质量 需求 。 

例如 , 浏览 者 要 欣赏 一 段 音 乐 或 电影 , 以 前 必须 先 将 这 段 音乐 或 电影 下 载 到 本 地 计算 机 的 
磁盘 当中 ,然后 使 用 相应 的 程序 来 播放 才能 实现 ,又 由 于 音频 或 视频 文件 都 比较 大 , 需要 较 长 
的 下 载 时 间 。 但 是 ， 当 流 〈Stream) 技术 出 现 以 后 ， 网 页 设计 者 充分 、 巧 妙 地 应 用 此 技术 ， 让 
浏览 者 在 下 载 过 程 中 就 可 以 欣赏 这 段 音 乐 或 电影 ,实现 了 实时 的 网 上 视频 直播 服务 和 在 线 欣 赏 
音乐 服务 ， 无 疑 增强 了 页 面 传播 信息 的 表现 力 和 感染 力 ， 如 图 3-9 所 示 。 
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图 3-9 技术 和 艺术 相 结合 
3.3.3 网 页 设计 相关 术语 

学 习 网 页 设计 ， 会 涉及 到 一 些 专业 术语 ， 本 节 将 会 对 这 些 术语 进行 详细 介绍 。 

1. 万 维 网 

万 维 网 (World Wide Web) 缩写 WWW 或 简称 3W， 它 是 无 数 个 网 络 站 点 和 网 页 的 集合 ， 
也 是 Intemet 提供 的 最 主要 的 服务 。 它 是 由 多 媒体 链接 而 形成 的 ， 当 用 户 单 击 超级 链接 时 ， 会 
通过 URL 直接 指向 要 显示 页 面 ， 如 图 3-10 所 示 。 


ol 


[a | ve 


pd 


图 3-10 万 维 网 的 应 用 
2. Web 服务 器 和 客户 端 


WWW 基于 客户 机 /服务 器 模式 ， 与 平台 无 关 。 客 户 机 和 服务 器 都 是 独立 的 计算 机 ， 客 户 
机 是 浏览 者 使 用 的 机 器 ， 服 务 器 是 存放 网 络 服务 的 计算 机 。 如 果 一 台 连 入 网 络 的 计算 机 ， 向 其 
他 计算 机 提供 各 种 网 络 服务 〈 如 数据 、 文 件 的 共享 等 ) 时 ， 它 就 被 称 作 服务 器 。 而 那些 用 于 访 
问 服务 器 资料 的 计算 机 则 被 称 作客 户 机 ， 其 结构 模式 如 图 3-11 所 示 。 
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1. 向 服务 端 发 出 请 求 


二 
昌 2. 服 务 器 端 对 请 求 作出 响应 


客户 机 服务 器 
图 3-11 客户 机 与 服务 器 模式 


通常 ,服务 器 对 于 浏览 Web 站 点 的 用 户 是 透明 的 ，Web 服务 器 传送 HTML 页 面 使 浏览 器 
可 以 浏览 。 确 切 一 点 ，Web 服务 器 专门 处 理 客户 机 请 求 (request) ， 处 理 完 请 求 之 后 ， 会 将 
这 些 请 求 发 送 到 客户 端 ,例如 返回 一 个 HTML 页 面 , 一 个 图 像 等 ,为 了 处 理 一 个 请 求 (request)， 
Web 服务 器 可 以 响应 (response) 一 个 静态 页 面 或 图 片 ， 进 行 页 面 跳 转 (redirect) 。 客 户 机 主 
要 享受 网 络 上 提供 的 各 种 资源 。 

3. 客户 端 浏览 器 


浏览 器 是 一 种 软件 ， 可 以 显示 网 页 文件 内 容 , 例如 显示 文本 信息 、 显 示 图 像 、 播 放 音 频 和 
视频 等 ,大 部 分 的 浏览 器 能 够 扩展 众多 插件 (plug-ins) 。 另 外 , 许多 浏览 器 还 支持 其 他 的 URL 
类 型 及 其 相应 的 协议 ， 例 如 FTP、Gopher、HTTPS (HTTP 协议 的 加 密 版 本 ) 。 

HTTP 内 容 类 型 和 URL 协议 规范 允许 网 页 设计 者 在 网 页 中 嵌入 图 像 、 动 画 、 视 频 、 声 音 、 
流 媒体 等 。 浏 览 器 在 操作 系统 中 是 独立 存在 , 读者 可 以 根据 喜好 ， 在 操作 系统 中 安装 不 同 的 浏 
览 器 软件 。 现 在 比较 流行 的 浏览 器 有 正 和 Firefox 等 。 

4. 统一 资源 定位 符 CURL) 

URL (Uniform Resource Locator) ， 称 为 统一 资源 定位 符 ， 它 是 一 个 能 识别 Intermet 地 址 
的 信息 资源 。 通 过 URL 可 以 到 达 任 何 网 络 地 址 寻找 所 需 的 资源 ， 例 如 文件 、 数 据 库 、 图 像 、 
新 闻 组 等 等 。 例 如 http://www.sohu.com/index.html 就 是 一 个 常见 的 URL 资源 。 


3.3.4 网 页 设计 原则 


网 页 的 艺术 设计 ， 是 技术 与 艺术 的 结合 ， 内 容 与 形式 的 统一 。 它 要 求 设计 者 必须 掌握 以 下 
三 个 主要 原则 。 


1. 主题 鲜明 


网 页 需要 有 明确 的 主题 , 并 能 够 以 独特 的 样式 吸引 浏览 者 的 注意 。 要 求 在 视觉 设计 上 一 定 
要 有 目标 ， 有 明确 主题 ， 并 能 在 最 短 时 间 内 被 浏览 者 接受 。 视 觉 设 计 需 要 具备 目标 唯一 、 简 单 
明了 、 精 确 和 清晰 等 特点 ， 最 好 还 要 具备 一 定 的 视觉 冲击 效果 。 

网 站 主题 决定 了 网 页 设计 风格 ， 只 有 主题 表达 清楚 , 才能 添加 艺术 信息 。 一 个 网 站 视觉 上 
再 美 ， 如 果 没 有 主题 信息 ， 也 不 会 有 浏览 者 访问 。 

例如 某 个 旅游 网 站 ， 所 展现 的 都 应 是 与 旅游 相关 的 信息 ， 如 图 3-12 所 示 。 
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图 3-12 主体 明确 
2. 形式 与 内 容 统一 


俗话 说 表里如一 ， 用 在 网 页 设计 中 是 非常 恰当 的 。 任 何 一 个 网 站 都 存在 内 容 和 形式 ， 内 容 
就 是 要 表达 的 对 象 ， 形 式 就 是 内 容 的 表现 方式 ， 例 如 一 个 新 闻 ， 新 闻 本 身 是 就 是 内 容 ， 具 有 极 
高 的 吸引 价值 ， 而 形式 就 是 新 闻 显示 的 方式 和 样式 ， 如 文本 显示 ， 此 时 需要 布局 、 搭 配 颜色 。 

在 网 页 设计 中 ,内容 可 以 说 是 主题 、 题 材 等 元 素 总 和 ， 形 式 就 是 它 的 结构 、 风 格 和 设计 语 
言 等 。 内 容 主宰 形式 ， 形式 影响 内 容 。 形 式 必须 符合 内 容 ， 二 者 才能 相得益彰 。 如 果 只 追求 花 
哨 的 表现 形式 以 及 惊人 的 冲击 效果 , 或 者 只 是 追求 内 容 而 缺乏 任何 的 艺术 表现 , 网 页 设计 要 么 


图 3-13 内容 形式 统一 


3. 强调 整体 


网 页 整体 效果 ， 即 整体 风格 ， 是 网 页 设计 者 必须 要 追求 的 。 例 如 一 个 人 如 果 上 身 穿 西装 ， 
下 身 穿 裤头 , 脚 上 穿 雨 靳 ,就 没有 整体 形象 了 。 网 页 是 一 种 媒体 表现 形式 , 是 用 来 传播 信息 的 。 
它 所 承载 的 信息 , 必须 具备 一 定价 值 , 有 一 定 的 内 容 、 主题 和 意念 , 这 样 才 能 够 被 人 们 所 接受 ， 
从 而 满足 人 们 需求 。 

然而 , 过 分 追求 整体 效果 , 会 牺牲 页 面 个 体 的 灵活 性 。 所 以 , 在 强调 网 页 整体 设计 的 同时 ， 
还 应 注意 网 页 个 体 灵 活性 ， 不 然 网 页 就 会 显得 呆板 、 沉 问 、 枯 燥 ， 进 而 影响 访问 者 的 情趣 或 浏 
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览 和 欲望。 
3.3.5 ”网 页 设计 的 成 功 要 素 

网 站 设计 成 功 的 要 素 有 整体 布局 、 有 价值 的 信息 、 速 度 、 图 形 、 版 面 设计 、 文 字 可 读 性 、 
网 页 标题 可 读 性 、 网 站 导航 、 保 护 个 人 信息 声明 和 词语 准确 。 

1. 整体 布局 

网 页 是 访问 者 最 先 看 到 的 信息 , 应 该 做 到 能 够 在 第 一 时 间 吸 引 住 浏览 者 。 好 的 网 页 应 该 干 
净 整 洁 、 条 理 清 楚 、 引 人 入 胜 。 不 应 是 杂乱 无 章 的 ， 例 如 有 过 多 的 闪烁 、 色 彩 、 下 拉 菜 单杠 、 
图 片 等 ， 这 样 就 会 分 散 浏览 者 的 注意 力 。 

2. 有 价值 的 信息 

无 论 任 何 种 类 的 网 站 , 其 目的 都 是 给 读者 一 定 的 价值 信息 ,这样 读者 才 会 愿意 浏览 。 这 些 
有 价值 的 信息 ， 可 以 是 新 闻 、 娱 乐 等 。 如 果 是 企业 网 站 ， 需 要 提供 关于 产品 信息 和 服务 信息 ， 
这 些 信息 必须 容易 理解 和 查询 。 

3. 速度 

如 果 30 秒 内 还 打 不 开 网 页 ， 一般人 就 会 没有 耐心 。 因 此， 在 设计 网 页 的 过 程 中 ， 至 少 应 
该 确保 主页 速度 尽 可 能 快 ， 最 好 不 要 用 大 的 图 片 。 

4. 图 形 和 版 面 设计 

图 形 和 版 面 设计 关系 到 浏览 者 对 网 页 的 第 一 印象 , 图形 应 集中 反映 主页 所 期 望 传达 的 主要 
信息 ， 如 图 3-14 所 示 。 


图 3-14 版 面 设计 


5. 文字 可 读 性 


在 设计 网 页 的 文字 信息 时 , 一 定 要 给 文字 周围 留 有 足够 的 空间 , 才能 使 浏览 者 感觉 不 到 压 
抑 ， 另 外 ， 文 字 的 颜色 最 好 不 要 使 用 紫色 、 橙 色 和 红色 ， 因 为 这 些 颜 色 会 让 人 眼花 绕 乱 。 

男 一 种 能 够 提高 文字 可 读 性 的 因素 是 所 选 的 字体 , 通用 字体 最 易 阅 读 , 特殊 字体 用 于 标题 
效果 较 好 ， 但 是 不 适合 正文 。 
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6. 网 页 标题 可 读 性 


网 页 标题 必须 容易 阅读 , 需要 为 所 有 标题 和 副标题 设置 同一 字体 , 并 将 标题 字体 加 大 一 号 ， 
所 有 标题 和 副标题 都 采用 粗 体 ， 这 样 便于 识别 标题 〈 字 体 加 大 加 粗 ) 和 副标题 〈 粗 体 ， 与 正文 
字体 大 小 相同 ) ， 使 浏览 者 一 眼 就 可 以 看 到 要 点 ， 以 便 找 出 并 继续 阅读 有 兴趣 的 内 容 。 

7. 网 站 导航 

由 于 人 们 习惯 于 从 左 到 右 、 从 上 到 下 阅读 ， 所 以 导航 条 通常 应 放置 在 页 面 左 边 , 对 于 较 长 


页 面 来 说 ,在 最 底部 设置 简单 导航 也 很 有 必要 。 确 定 一 种 满意 模式 之 后 ， 最 好 将 这 种 模式 应 上 
到 同一 网 站 的 每 个 页 面 ， 这 样 ， 浏 览 者 就 知道 如 何 寻找 信息 。 


8. 词语 准确 

一 个 网 站 如 果 只 有 漂亮 的 外 观 但 是 却 词语 错误 连篇 、 语 法 混乱 ， 同 样 是 失败 的 ， 因 此 ， 应 
注意 词语 的 准确 无 误 。 
3.3.6 ”网 页 设计 风格 及 色彩 搭配 

网 站 设计 要 注意 的 两 个 要 点 ， 整体 风格 和 色彩 搭配 。 

1. 确定 网 站 整体 风格 


同一 个 主题 ,任何 两 人 都 不 可 能 设计 出 完全 一 样 的 网 站 。 风 格 〈style) 是 抽象 的 ， 是 指 站 
点 的 整体 形象 给 浏览 者 的 综合 感受 。 这 些 都 是 网 站 给 人 们 留 下 的 不 同感 受 。 例 如 ， 如 图 3-15 
所 示 的 网 站 首页 ， 特 点 是 风格 简洁 、 大 方 ， 主 题 明 确 。 


图 3-15 整体 风格 


2. 网 页 色彩 搭配 


无 论 是 平面 设计 ， 还 是 网 页 设计 ， 色 彩 永远 是 最 重要 的 一 环 。 当 距离 显示 屏 较 远 的 时 候 ， 
看 到 的 不 是 优美 的 版 式 或 美丽 的 图 片 ， 而 是 网 页 的 色彩 。 例 如 图 3-16 所 示 的 首页 ， 其 颜色 以 
浅 色 作为 主 色 调 ， 可 以 衬托 文字 和 图 片 效 果 。 
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图 3-16 色彩 搭配 
下 面 介绍 一 些 网 页 色彩 搭配 的 实战 经 验 。 


@ 和 白 纸 黑 字 是 永远 的 主题 。 
@ 网 页 最 常用 流行 色 : 
> 蓝 色 一 一 蓝天 白云 ， 沉 静 整 洁 的 颜色 。 
> 绿色 一 一 绿 白 相 间 ， 和 雅致 而 有 生气 。 
> 橙色 一 一 活泼 热烈 ， 标 准 商业 色调 。 
> 暗 红 一 一 宁 重 、 严 肃 、 高 贵 ， 需 要 配 黑 和 灰 来 压制 刺激 的 红色 。 
@ 顾 色 忌讳 : 
> 辟 脏 背景 与 文字 内 容 对 比 不 强烈 ， 灰 瞳 的 背景 会 令 人 肖 吕 。 
> 辟 纯 一 一 艳丽 的 纯色 对 人 的 刺激 太 强烈 ， 缺 乏 内 涵 。 
> 忌 花 一 一 要 有 一 种 主 色 贯穿 其 中 ， 主 色 并 不 是 面积 最 大 的 颜色 ， 而 是 最 重要 ， 最 
能 揭示 和 反映 主题 的 颜色 。 
> ”总 粉 一 一 颜色 浅 固然 显 的 干净 ， 但 如 果 对 比 过 弱 ， 就 会 显得 苍白 无 力 
> 蓝 色 忌 纯 ， 绿 色 忌 黄 ， 红 色 忌 艳 。 
@ 几 种 固定 搭配 : 
蓝 白 橙 一 一 蓝 为 主 调 。 白 底 ， 蓝 标题 栏 ， 橙 色 按 钮 或 ICON 做 点 缓 。 
绿 白 兰 一 一 绿 为 主 调 。 白 底 ， 绿 标题 栏 ， 兰 色 或 橙色 按钮 或 用 ICON 做 点 级 。 
橙 白 红 一 一 橙 为 主 调 。 白 底 ， 橙 标题 栏 ， 暗 红 或 桔 红 色 按钮 或 用 ICON 做 点 缓 。 
暗 红 黑 上 暗 红 主 调 。 黑 或 灰 底 ， 暗 红 标 题 栏 ,文字 内 容 背景 为 浅 灰 色 。 


3.4 网 页 设计 师 应 具备 的 素质 
当 打 开 网 站 时 ,首先 映 入 眼帘 的 是 该 网 页 的 界面 设计 , 如 内 容 介绍 、 按钮 摆 放 、 文字 组 合 、 


色彩 应 用 、 网 页 导航 等 ， 这 些 都 是 网 页 设计 师 的 工作 。 作 为 优秀 的 网 页 设计 师 ， 需 要 具备 艺术 
素质 、 技 能 素质 和 综合 素质 等 。 
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3.4.1 艺术 素质 


美 是 包含 或 体现 社会 生活 的 本 质 、 规律 ， 引起 人 们 的 特定 情感 反映 的 具体 形象 (包括 社会 
形象 、 自 然 形象 和 艺术 形象 ) 。 审 美能 力 是 个 人 所 具有 的 进行 审美 活动 相关 的 主观 条 件 和 心理 
能 力 。 

作为 一 名 网 页 设计 师 , 要 使 自己 的 网 页 具有 美感 。 这 要 求 设 计 师 平时 多 积累 , 在 仔细 观察 
的 基础 上 分 析 美 的 来 源 , 并 能 灵活 地 将 这 种 美 在 自己 的 作品 中 表现 出 来 。 只 有 这 样 才 能 使 自己 
的 审美 能 力 达到 一 定 的 高 度 。 

网 页 设计 中 所 总 含 的 美 ， 是 通过 视听 来 实现 的 。 网 页 设计 中 恰当 引导 访问 者 的 视 (文字 、 
图 形 、 动 画 ) 听 (声音 ) 两 种 感官 ， 使 其 获得 “美感 ”， 是 设计 中 的 关键 。 例 如 ， 如 图 3-17 
所 示 的 网 页 首页 ， 通 过 色彩 、 图 片 和 创意 将 美发 挥 出 来 。 


Ge Ss 


图 3-17 艺术 审美 
3.4.2 ”技能 素质 


技术 问题 是 网 页 设计 的 核心 。 网 页 设计 者 不 仅 要 考虑 设计 给 用 户 的 感觉 、 用 户 访问 站 点 的 
目的 ， 同 时 还 要 考虑 如 何 运用 技术 把 自己 的 思想 表达 出 来 。 


3.4.3 ”综合 素质 


作为 合格 的 网 页 设计 师 , 必要 的 文化 素质 是 不 可 少 的。 当然 文化 素质 不 仅仅 包括 文学 修养 ， 
还 有 音乐 和 绘画 等 方面 的 修养 ,只 有 具备 这 些 方面 的 修养 ,才能 够 使 自己 网 页 达到 一 定 的 水 准 ， 
才能 够 使 人 欣赏 到 好 的 网 页 制作 。 
网 页 设计 者 的 素质 不 是 在 短 时 间 内 就 能 提高 的 ， 要 靠 时 间 用 心 积累 而 成 。 因 此 ， 要 想 成 为 
-名 真正 的 设计 高 手 , 网 页 设计 者 不 仅 要 有 一 颗 真 诚 为 浏览 者 服务 的 心 , 还 要 广泛 涉猎 各 个 领 
域 ， 特 别 是 要 提高 自己 的 艺术 修养 、 文 学 水 平 以 及 鉴别 能 力 。 
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3.5 ”网 站 制作 流程 


网 站 的 整体 规划 和 设计 的 好 坏 是 它 发 展 的 重要 之 处 , 也 是 它 吸引 人 们 浏览 的 所 在 之 处 。 动 
手 创建 网 站 ， 需 要 遵循 一 定制 作 流程 。 


3.5.1 前 期 策划 


在 做 网 站 之 前 ， 要 有 准确 的 定位 。 在 明确 建站 目的 和 网 站 定位 以 后 ， 就 要 开始 收集 相关 意 
见 。 

1. 网 站 定位 

如 果 是 公司 的 网 站 , 在 定位 时 ， 要 与 公司 决策 层 人 士 共同 讨论 ， 以 便于 让 上 层 领导 能 对 网 
站 发 展 方向 有 一 定 的 把 握 , 同时 最 好 调动 公司 其 他 部 门 一 起 参 于 讨论 , 能 够 及 时 从 公司 立场 提 
出 好 的 建议 ， 并 结合 到 策划 中 去 。 策 划 时 全 面 考虑 ， 是 前 期 策划 中 最 为 关键 的 一 步 。 

2. 收集 相关 信息 

网 站 如 果 是 为 公司 服务 的 , 就 要 收集 各 个 部 门 的 意见 和 想法 这 是 必要 的 , 需要 将 这 一 步 整 
理 成 文档 ， 并 找 出 重点 。 再 根据 重点 以 及 公司 业务 侧重 点 ， 结 合 网 站 定位 来 确定 网 站 分 栏 有 哪 
儿 项 。 


3.5.2 页面 细 化 及 实施 


页 面 设计 人 员 是 根据 策划 书 来 设计 页 面 的 ,在 设计 之 前 应 该 让 栏目 负责 人 把 需要 特殊 处 理 
的 地 方 和 设计 人 员 讲 明 。 在 设计 页 面 时 , 设计 人 员 一 定 要 根据 策划 书 把 每 个 栏目 的 具体 位 置 和 
网 站 的 整体 风格 确定 下 来 ， 为 了 让 网 站 有 整体 感 ， 应 该 在 网 页 中 放置 一 些 贯穿 性 的 元 素 。 

实现 设计 时 ， 由 制作 人 员 负 责 实 现 网 页 ， 并 制作 成 模版 。 在 这 个 过 程 实现 的 同时 ， 栏 目 负 
责 人 应 该 开始 收集 每 个 栏目 的 具体 内 容 并 进行 整理 。 模 版 制作 完成 后 , 由 栏目 负责 人 往 每 个 栏 
目 里 面 添加 具体 内 容 。 

在 上 述 过 程 进行 的 同时 程序 员 应 该 正 处 于 开发 程序 的 阶段 ,要 注意 选择 好 的 网 站 开发 语言 
和 适合 的 数据 库 。 
3.5.3 网 站 上 传 

将 网 站 上 传 到 网 络 服务 器 的 整个 流程 是 ;首先 要 在 网 络 服务 器 上 注册 域名 和 申请 网 络 空 
间 ， 然 后 配置 网 站 系统 ， 最 后 才能 上 传 网 站 。 

1. 申请 域名 

网 站 建 好 之 后 ， 就 要 给 网 站 注册 标识 ， 即 域名 。 

申请 域名 的 方法 很 多 , 用 户 可 以 登录 域名 服务 商 的 网 站 , 根据 提示 申请 域名 。 域名 有 免费 
域名 和 收费 域名 两 种 ， 用 户 可 以 根据 实际 的 需要 进行 选择 。 
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2. 申请 空间 

域名 注册 成 功 之 后 ， 就 需要 申请 网 站 空间 。 应 根据 不 同 的 网 站 类 型 选择 不 同 的 空间 。 

网 站 空间 有 免费 空间 和 收费 空间 两 种 ,对 于 个 人 网 站 的 用 户 来 说 ,可 以 申请 免费 空间 使 用 。 
免费 空间 只 需 向 空间 的 提供 服务 器 提出 的 申请 , 在 得 到 答复 后 , 按照 说 明 上 传 主页 即 可 , 主页 
的 域名 和 空间 都 不 用 操心 。 使 用 免费 空间 美中不足 的 是 : 网 站 的 空间 有 限 ， 提 供 的 服务 一 般 ， 
室 间 不 是 非常 稳定 ， 域 名 不 能 随心 所 和 欲 。 

对 于 商业 网 站 而 言 ， 用 户 需要 考虑 空间 和 安全 性 等 因素 ， 为 此 可 以 选择 收费 网 站 。 

3. 配置 网 站 系统 


对 于 企业 单位 来 说 ,如 果 是 企业 自己 的 服务 器 , 那么 只 要 把 做 好 的 网 站 (包括 CGI、ASP、 
JSP 或 者 PHP 等 程序 ) 发 到 WWW 路 径 下 就 可 以 了 。 而 对 于 个 人 申请 的 免费 空间 网 页 ， 就 需 
要 将 本 地 计算 机 上 已 经 做 好 的 网 站 上 传 到 申请 好 的 网 站 服务 器 的 免费 空间 上 去 。 


3.5.4 ”后 期 维护 
网 站 制作 并 完成 上 传 后 ， 接 下 来 是 网 站 维护 ， 下 面 介绍 网 站 后 期 维护 的 主要 方法 。 
1. 做 好 网 站 备份 
现在 互联 网 技术 普及 ,普通 用 户 利用 黑客 软件 ， 就 能 攻击 安全 性 不 高 的 网 站 ， 从 而 造成 网 


站 服务 器 崩溃 、 数 据 丢 失 等 ， 最 终 网 站 将 付 诸 东 流 。 因 此 ， 对 网 站 的 定期 备份 ， 不 仅 是 对 自己 
负责 ， 还 是 对 网 站 忠实 用 户 的 尊重 。 


2. 定期 查看 网 站 日 志 

网 站 管理 人 员 , 应 该 查看 网 站 日 志 。 通 过 网 站 日 志 , 可 以 了 解 到 搜索 引擎 何 时 访问 了 网 站 ， 
又 访问 了 哪些 页 面 ， 经 常 访 问 哪些 页 面 ， 这 些 信息 对 进一步 优化 改善 网 站 非常 重要 。 

此 外 ,维护 人 员 还 可 以 了 解 网 站 是 否 出 现 了 故障 ,是否 已 被 入 侵 。 最 重要 的 是 通过 网 站 日 
志 ， 可 以 检测 出 是 否 有 采集 软件 在 采集 网 站 数据 ， 网 站 是 否 被 盗 链 。 


3. 网 站 内 容 维护 


内 容 是 比较 重要 的 。 当 用 户 第 二 次 来 网 站 和 前 一 次 访问 看 到 的 内 容 一 样 时 或 许 还 回来 第 三 
次 ， 但 第 三 次 内 容 还 是 没有 更 新 ， 那 就 可 能 要 失去 这 个 忠实 用 户 了 。 


4. 网 站 外 链 维护 


外 链 是 网 站 维护 不 可 分 割 的 一 部 分 , 在 互联 网 中 , 没有 了 外 链 网 站 就 像 大 海中 的 孤岛 。 外 
链 不 仅仅 是 在 互联 网 这 个 地 图 上 标 出 了 位 置 ,更 是 为 搜索 引擎 建 起 了 桥梁 , 当 桥梁 足够 宽阔 时 ， 
搜索 引擎 会 带 来 源源 不 断 的 客流 。 
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3.6 ”综合 实例 一 一 搜集 网 页 素材 


目前 图 片 是 组 成 网 页 的 主要 元 素 之 一 , 在 浏览 网 页 时 ,如 果 遇 到 比较 漂亮 的 图 片 ,可 以 将 
其 下 载 并 保存 起 来 ， 以 便 以 后 欣赏 和 使 用 。 保 存 网 页 中 图 片 的 具体 操作 步骤 如 下 : 


t@ 划 打开 一 个 存在 图 片 的 网 页 ， 如 图 3-18 所 示 。 


图 3-18 美 图 网 页 


lt@3 在 图 片 的 任意 位 置 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 “图 片 另存 为 ”菜单 项 ， 
如 图 3-19 所 示 。 


图 3-19 “图 片 另存 为 ”选项 


3) 即 可 打开 “保存 图 片 ”对 话 框 ， 在 “文件 名 ”文本 框 中 输入 要 保存 图 片 的 名 称 ， 单 
击 “保存 类 型 ” 右 侧 的 下 拉 按钮 ， 在 弹出 的 下 拉 列 表 中 选择 “JPEG (*:jpg) ”选项 ， 如 图 3-20 
所 示 。 


。71°* 
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图 3-20 “保存 图 片 ”对 话 框 


(级 单 击 “ 保 存 ” 按 钮 ， 即 可 开始 下 载 并 保存 图 片 。 打 开 图 片 存放 的 目录 ， 即 可 在 该 文 
件 夹 下 看 到 下 载 的 图 片 缩 略 图 ， 如 图 3-21 所 示 。 


四 ! 欧 区 jpg 沙漠 jpg /Marzjpg 水 母 jpg 
图 图片 站 
[ze 
昌文 档 | 局 二 
中 证 和 
湖 计 算 机 灯 域 jpg 企 类 jpg 雪人 二 jpg 沉 浊 名 宣 jpg 


鱼 娱 条 区 (P) 


浪漫 卧室 jpg 挖 生日 其 指定 哲 彼 昌 其 
JPEG 图 多 标 忆 : 语 吉 标记 


大 ds 671 KB 


图 3-21 保存 的 图 片 


3.7 ”问题 解答 


1. 网 页 设计 中 ， 图 像 如 何 使 用 ? 

图 像 内 容 应 有 一 定 的 实际 作用 , 切忌 虚 饰 浮夸 。 图 像 可 以 弥补 文字 的 不 足 , 但 并 不 能 够 完 
全 取代 文字 。 很 多 用 户 把 浏览 软件 设 定 为 略 去 图 像 ， 以 求 节省 时 间 ， 因 此 ， 制 作 主页 时 ， 必 须 
注意 将 图 像 所 链接 的 重要 信息 或 链接 其 他 页 面 的 指示 用 文字 重复 表达 几 次 ,同时 要 注意 避免 使 
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过 大 的 图 像 ， 如 果 不 得 不 放置 大 的 图 像 在 网 站 上 , 应 该 把 图 像 的 缩小 版 本 的 预览 效果 显示 出 
来 ， 这 样 用 户 就 不 必 浪 费 金钱 和 时 间 去 下 载 他 们 根本 不 想 看 的 大 图 像 了 。 

2. 如 何 使 用 动画 ? 

大 家 都 喜欢 用 GIF 动画 来 装饰 网 页 ， 虽 然 GIF 动画 的 确 很 吸引 人 ， 但 在 选择 时 ， 要 判断 
是 否 必须 用 GIF 动画 ， 如 果 答 案 是 否定 的 ， 那 么 就 选择 静态 的 图 片 ， 因 为 它 的 容量 要 小 得 多 。 
同样 尺寸 的 Logo，GIF 动画 的 容量 有 SK， 而 静止 Logo 的 只 有 3K。 昌 然 只 有 2K 之 差 ， 但 多 
起 来 ， 就 会 影响 下 载 的 速度 ， 所 以 ， 如 果 有 些 不 是 必须 的 ， 就 选择 最 小 的 。 

3. 网 页 设计 对 HTML 代码 要 求 大 么 ? 

为 了 成 功 地 设计 网 站 , 必须 理解 HTML 是 如 何 工作 的 。 建 议 新 手 应 从 本 书 中 去 寻找 答案 ， 
用 记事 本 制作 网 页 。 因 为 用 HTML 设计 网 站 ， 可 以 控制 设计 的 整个 过 程 。 
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文档 结构 ， 主 要 是 指 文章 的 内 部 结构 , 在 网 页 中 则 表现 为 整个 页 面 的 内 部 结构 。 在 HTML 
5 之 前 ， 并 没有 对 网 页 文档 的 结构 进行 明确 的 规范 ， 因 而 打开 网 页 源 代码 时 ， 可 能 无 法 分 清 哪 
些 是 头 部 哪些 是 尾部 ， 而 在 HTML 5 中 则 对 此 做 了 明确 的 规范 。 


4.1 Web 标准 


在 学 习 HTML 5 网 页 文档 结构 之 前 ， 首 先 需 要 了 解 Web 的 标准 ， 该 标准 主要 是 为 了 解决 
各 种 浏览 器 与 网 页 的 兼容 性 问题 。 


4.1.1 Web 标准 概述 


无 规矩 不 成 方圆 ， 对 于 网 页 设计 也 是 如 此 。 为 了 Web 更 好 地 发 展 ， 对 于 开发 人 员 和 最 终 
用 户 而 言 , 非常 重要 的 事情 就 是 在 开发 新 的 应 用 程序 时 , 浏览 器 开发 商 和 站 点 开发 商 需要 遵守 
同一 标准 ， 就 是 Web 标准 。 

为 了 缩短 开发 和 维护 时 间 , 未 来 的 网 站 将 不 得 不 根据 标准 来 进行 编码 。 这 样 ， 开 发 人 员 就 
不 必 为 了 得 到 相同 的 结果 ， 而 挣扎 于 多 版 本 的 开发 困扰 中 。 一 旦 所 有 Web 开发 人 员 遵守 了 
Web 标准 ， 那 么 开发 人 员 就 可 以 更 容易 地 理解 彼此 的 编码 了 ，Web 开发 团队 所 有 协作 也 将 会 
得 到 简化 。 

使 用 Web 标准 有 以 下 几 个 优点 。 

1. 对 于 访问 者 


文件 下 载 与 页 面 显示 速度 更 快 。 

内 容 能 被 更 多 的 用 户 所 访问 (包括 失明 、 视 弱 、 色 育 等 残障 人 士 ). 

内 容 能 被 更 广泛 的 设备 所 访问 ( 包括 屏幕 阅读 机 、 手 持 设备 、 打 印 机 等 等 )。 
用 户 能 够 通过 样式 选择 定制 自己 的 表现 界面 。 

所 有 页 面 都 能 提供 适 于 打印 的 版 本 
， 对 于 网 站 所 有 者 

更 少 的 代码 和 组 件 ， 容 易 维 护 。 

带宽 要 求 降低 (代码 更 简洁 )， 成 本 降低 。 

更 容易 被 搜寻 引擎 搜索 到 。 

改版 方便 ， 不 需要 变动 页 面 内 容 。 


eeemeee eg@ @ 
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@ 提供 打印 版 本 而 不 需要 复制 内 容 。 
@ 提高 网 站 易 用 性 。 在 美国 ， 有 严格 的 法 律 条 款 (Section 508 ) 来 约束 政府 网 站 必须 达 
到 一 定 的 易 用 性 ， 其 他 国家 也 有 类 似 的 要 求 。 

4.1.2 ”Web 标准 规定 的 内 容 

WEB 标准 不 是 某 一 个 标准 ， 而 是 一 系列 标准 的 集合 。 网 页 主要 由 三 部 分 组 成 : 结构 
(Structure) 、 表 现 〈Presentation) 和 行为 《Behavior) ， 那 么 ， 对 应 的 标准 也 分 三 方面 ， 分 
别 如 下 : 

@ 结构 化 标准 语言 主要 包括 XHTML 和 XML. 

@ 表现 标准 语言 主要 包括 CSS。 

@ 行为 标准 主要 包括 对 和 象 模型 ， 如 W3C DOM、ECMAScript 等 。 


这 些 标准 大 部 分 由 W3C 起 草 和 发 布 , 也 有 一 些 是 其 他 标准 组 织 制订 的 标准 ， 比 如 ECMA 
(European Computer Manufacturers Association) 的 ECMAScript 标准 。 

1. 结 构 标 准 语言 

(1) XML 


XML 是 Extensible Markup Language (可 扩展 标识 语言 ) 的 简写 。 目 前 推荐 遵循 的 是 W3C 
于 2000 年 10 月 6 日 发 布 的 XML1.0。 和 HTML 一 样 ，XML 同样 来 源 于 SGML， 但 XML 是 
一 种 能 定义 其 他 语言 的 语言 。XML 最 初 设计 的 目的 是 弥补 HTML 的 不 足 ， 以 其 强大 的 扩展 性 
满足 网 络 信息 发 布 的 需要 ， 后 来 逐渐 用 于 网 络 数据 的 转换 和 描述 。 

(2) XHTML 


XHTML 是 Extensible HyperText Markup Language〈 可 扩展 超 文 本 标识 语言 ) 的 缩写 。 目 
前 推荐 遵循 的 是 W3C 于 2000 年 1 月 26 日 发 布 的 XML1.0。XML 虽然 数据 转换 能 力 强大 ， 完 
全 可 以 替代 HIML, 但 面 对 成 千 上 万 已 有 的 站 点 , 直接 采用 XML 还 为 时 过 早 。 因 此 , 在 HIML 
4.0 的 基础 上 ， 用 XML 的 规则 对 其 进行 扩展 ， 得 到 了 XHTML。 简 单 的 说 ， 建 立 XHTML 的 
目的 就 是 实现 HTML 向 XML 的 过 渡 。 


2. 表现 标准 语言 


CSS 是 Cascading Style Sheets〈 层 登 样 式 表 ) 的 缩写 。 目 前 推荐 遵循 的 是 W3C 于 1998 年 
5 月 12 日 分 布 的 CSS2。W3C 创建 CSS 标准 的 目的 是 以 CSS 取代 HIML 表格 式 布局 、 帧 和 
其 他 表现 的 语言 。 纯 CSS 布局 与 结构 式 XHTML 相 结合 能 帮助 设计 师 分 离 外 观 与 结构 ， 使 站 
点 的 访问 及 维护 更 加 容易 。 

3. 行为 标准 

( 1) DOM 


DOM 是 Document Object Model (文档 对 象 模型 ) 的 缩写 。 根 据 W3C DOM 规范 ，DOM 
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是 一 种 与 浏览 器 平台 语言 的 接口 ， 使 得 它 可 以 访问 页 面 其 他 的 标准 组 件 。 简 单 理解 ， DOM 解 
决 了 Netscaped 的 JavaScript 和 Microsoft 的 JScript 之 间 的 冲突 ， 给 Web 设计 师 和 开发 者 提供 
标准 的 方法 ， 让 他 们 可 以 访问 自己 站 点 中 的 数据 、 脚 本 和 表现 层 对 像 。 

( 2 ) ECMAScript 


ECMAScript 是 ECMA (European Computer Manufacturers Association) 制定 的 标准 脚本 语 
言 (JavaScript) 。 目 前 推荐 遵循 的 是 ECMAScript 262 。 


4.2 HTML 5 文档 的 基本 结构 


HTML 5 文档 最 基本 的 结构 主要 包括 文档 类 型 说 明 、 开 始 标记 、 元 信息 、 主 体 标记 和 页 面 
注释 标记 等 。 
4.2.1 HTML 5 结构 


在 一 个 HTML 文档 中 , 必须 包含 <ZHTML></HMTL> 标 记 , 并 且 放 在 HTML 文档 中 开始 和 
结束 位 置 。 即 每 个 文档 以 <HTML> 开 始 ， 以 </HTML> 结 束 。 

<HTML></HMTL> 之 间 通 常 包含 两 个 部 分 ， 分 别 是 <head></head> 和 <body></body>， 
<head> 标 记 包含 HTML 头 部 信息 ， 例 如 文档 标题 、 样 式 定义 等 。<body> 包 含 文档 主体 部 分 ， 
即 网 页 内 容 。 需 要 注意 的 是 ，HTML 标记 不 区 分 大 小 写 。 

为 了 便于 读者 从 整体 把 握 HIML 文档 结构 ,通过 一 个 HTML 页 面 来 介绍 HTML 页 面 的 整 
体 结构 ， 示 例 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<title> 网 页 标题 </title> 
</head> 
<body> 
网 页 内 容 
</body> 
</html> 
从 上 面 代码 可 以 看 出 ， 一 个 基本 的 HTML 页 有 以 下 几 部 分 构成 。 


@ <IDOCTYPE>: 声明 必须 位 于 HTML 5 文档 中 的 第 一 行 , 也 就 是 位 于 <html> 标 记 之 前 。 
该 标记 告知 浏览 器 文档 所 使 用 的 HTML 规范 。<!DOCTYPE> 声 明 不 属于 HTML 标记 ; 
它 是 一 条 指令 ， 告 诉 浏览 器 编写 页 面 所 用 标记 的 版 本 。 由 于 HTML 5 版 本 还 没有 得 到 
浏览 器 的 完全 认可 ， 后 面 介绍 时 还 采用 以 前 通用 的 标准 。 

@ <html></html>: 说 明 本 页 面 使 用 HTML 语言 编写 ， 使 浏览 器 软件 能 够 准确 无 误 地 解 
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@ -<head></head>: 是 HTML 的 头 部 标记 ， 头 部 信息 不 显示 在 网 页 中 ， 此 标记 可 以 保护 
其 他 标记 。 用 于 说 明文 件 标题 和 整个 文件 的 一 些 公用 属性 。 可 以 通过 <style> 标 记 定义 
CSS 样式 表 ， 通 过 <scripf> 标 记 定义 JavaScript 脚本 文件 。 

@ <title></title>: 是 head 中 的 重要 组 成 部 分 ， 它 包含 的 内 容 显 示 在 浏览 器 的 窗口 标题 栏 
中 。 如 果 没有 title， 浏 览 器 标题 栏 显示 本 页 的 文件 名 。 

@ <body></body>: 包含 HIML 页 面 的 实际 内 容 ， 显 示 在 浏览 器 窗口 的 客户 区 中 。 例 如 
页 面 中 文字 、 图 像 、 动 画 、 超 链接 以 及 其 他 HTML 相关 的 内 容 都 是 在 body 标记 里 的 
种 关 。 


4.2.2 ”文档 类 型 说 明 


Web 页 面 的 文档 类 型 说 明 (DOCTYPE) 被 极 大 地 简化 了 。 细 心 的 读者 会 发 现 ， 在 第 1 章 
中 使 用 Dreamweaver CS5.5 创建 的 HTML 文档 时 ， 文 档 头 部 的 类 型 说 明代 码 如 下 : 


<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" "http:/Wwww.w3.org/TR/xhtmll/ 
DTD/xhtmll-transitional.dtd"> 


上 面 为 XHTML 文档 类 型 说 明 , 读者 可 以 看 到 这 段 代码 既 麻烦 又 难 记 , HTML 5 对 文档 类 
型 进行 了 简化 ， 简 单 到 15 个 字符 就 可 以 了 ， 代 码 如 下 : 


<!DOCTYPE html> 


已 文档 类 型 的 申明 需要 出 现在 HTML 5 文件 的 第 一 行 。 
注 


4.2.3 HTML 5 标记 


HTML 5 标记 代表 文档 的 开始 ， 由 于 HTML 5 语言 语法 的 松散 特性 ， 该 标记 可 以 省 略 ， 但 
是 为 了 使 之 符合 Web 标准 和 文档 的 完整 性 ， 养 成 良好 的 编写 习惯 ， 建 议 不 要 省 略 该 标记 。 

HTML 5 标记 以 <html> 开 头 ， 以 </html> 结 尾 ， 文 档 的 所 有 内 容 书写 在 开头 和 结尾 的 中 间 
部 分 。 语 法 格式 如 下 : 


<html> 
</html> 
4.2.4 头 标 记 


头 标记 head 用 于 说 明文 档 头 部 相关 信息 ， 一 般 包括 标题 信息 、 元 信息 、 定 义 CSS 样式 和 
脚本 代码 等 。HTML 的 头 部 信息 以 <head> 开 始 ， 以 </head> 结 束 ， 语 法 格式 如 下 : 


<head> 
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</head> 


<head> 元 素 的 作用 范围 是 整 篇 文档 ， 定 义 在 HTML 语言 头 部 的 内 容 往往 不 会 在 网 页 上 直 


1. 标题 标记 


HTML 页 面 的 标题 一 般 是 用 来 说 明 页 面 的 用 途 ， 它 显示 在 浏览 器 的 标题 栏 中 。 在 HTML 
文档 中 ,标题 信息 设置 在 <head> 与 </head> 之 间 。 标题 标记 以 <tile> 开 始 ， 以 </title> 结 束 , 语法 
格式 如 下 : 


<title> 


</title> 


在 标记 中 间 的 “... ”就 是 标题 的 内 容 ， 它 可 以 帮助 用 户 更 好 地 识别 页 面 。 预 览 网 页 时 ， 
设置 的 标题 在 浏览 器 的 左上 方 标题 栏 中 显示 ， 此 外 ， 在 Windows 任务 栏 中 显示 的 也 是 这 个 标 
题 ， 如 图 4-1 所 示 。 


文件 站 ” 光 对 由 重 看 VI 交大 闪 内 工具。 可 | 


手机 版 。 亲 , 欢迎 末 蜀 宣 ! 请 登录 名 再 央 我 要 天 | 我 拉 沟 宣 "请 


淘 合 网 1 而 i er 


Taobaocom 打 局 袍 里 寿 “大 荧 达 人 条 到 这 各 卉 风衣 


天。 村 草 作 电器 城 一 淘 网 。_Hitao 收 扮 ”本 地 生活 
海宝 服务 更 多) 
六 网 和 

拍 才 会 跳 于 本 党 全 而 
试 月 中 心 电子 书 全 球 购 

及 生 天 

和 要 ft 机 
水 电 煤 _ 理 时 医药 馆 


高 5 动 天 湛 TnAtLcon 精 选 品牌 特卖 久 男 装 全 场 包 
要 本 街 话 免 滋 女 朗 。 1 站 PY rson eon 


源 公 仔 乐 舌 + 淘宝 天 下 蔚 5 
a aa Em 


图 4-1 标题 栏 在 浏览 器 中 的 显示 效果 


页 面 的 标题 只 有 一 个 ， 在 HTML 文档 的 头 部 ， 即 <head> 和 </head> 之 间 。 
注 


2. 元 信息 标记 


<meta> 元 素 可 提供 有 关 页 面 的 元 信息 (meta-information) ， 比 如 针对 搜索 引擎 和 更 新 频 
度 的 描述 和 关键 词 。 
<meta> 标 签 位 于 文档 的 头 部 ， 不 包含 任何 内 容 。<meta> 标 签 的 属性 定义 了 与 文档 相关 联 
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的 名 称 / 值 对 ，<meta> 标 签 提供 的 属性 及 取 值 ， 如 下 表 所 示 。 


属性 值 描述 

charset character encoding 定义 文档 的 字符 编码 

content some text 定义 与 http-equiv 或 name 属性 相关 的 元 信息 
content-type 

http-equiv on 把 content 属性 关联 到 HTTP 头 部 

set-cookie 
author 
description 
keywords 
generator 
revised 
others 


把 content 属性 关联 到 一 个 名 称 


name 


( 1) 字符 集 charset 属性 
在 HTML 5 中 ， 有 一 个 新 的 charset 属性 ， 它 使 字符 集 的 定义 更 加 容易 。 例 如 ， 下 列 代码 
告诉 浏览 器 ， 网 页 使 用 “ISO-8859-1” 字 符 集 显 示 ， 代 码 如 下 : 


<meta charset="ISO-8859-1"> 


(2) 搜索 引擎 的 关键 字 


在 早期 Meta Keywords 关键 字 对 搜索 引擎 的 排名 算法 起 到 一 定 的 作用 ， 也 是 很 多 人 进行 
网 页 优化 的 基础 。 关 键 字 在 浏览 时 是 看 不 到 的 ， 使 用 格式 如 下 : 


<meta name="keywords" content=" 关 键 字 ,keywords" /> 


说 明 : 
@ 不 同 的 关键 词 之 间 应 用 半角 喜 号 隔 开 (英文 输入 状态 下 )， 不 要 使 用 “空格 ”或 “| 
间隔 ; 


@ 其 中 ， 关 键 字 是 keywords， 不 是 keyword; 

@ 关键 字 标签 中 的 内 容 应 该 是 一 个 个 的 短语 ， 而 不 是 一 段 话 。 
例如 ， 定 义 针对 搜索 引擎 的 关键 词 ， 代 码 如 下 : 

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" /> 


关键 字 标签 keywords， 曾 经 是 搜索 引擎 排名 中 很 重要 的 因素 ， 但 现在 已 经 被 很 多 搜索 
引擎 完全 忽略 。 如 果 加 上 这 个 标签 对 网 页 的 综合 表现 没有 坏处 ， 不 过 ， 如 果 使 用 不 恰当 的 
话 ， 对 网 页 非但 没有 好 处 ， 还 有 欺诈 的 嫌疑 。 在 使 用 关键 字 标签 keywords 时 ， 要 注意 以 下 
几 点 : 

@ 关键 字 标 签 中 的 内 容 要 与 网 页 核心 内 容 相 关 ， 确 信使 用 的 关键 字 出 现在 网 页 文本 中 。 

@ 使 用 用 户 易 于 通过 搜索 引擎 检索 的 关键 字 , 过 于 生僻 的 词汇 不 太 适 合 做 meta 标签 中 的 
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关键 词 。 
@ 不 要 重复 使 用 关键 词 ， 否 则 可 能 会 被 搜索 引擎 惩罚 。 
@ 一 个 网 页 的 关键 词 标签 里 最 多 包含 3~5 个 最 重要 的 关键 词 ， 不 要 超过 5 个。 
@ 每 个 网 页 的 关键 词 应 该 不 一 样 。 


由 于 设计 者 或 SEO 优化 者 以 前 对 meta keywords 关键 字 的 滥用 ， 导 致 目前 它 在 搜 
注 索引 擎 排名 中 的 作用 很 小 。 


(3) 页 面 描述 


meta description 元 标签 〈 描 述 元 标签 ) 是 一 种 HTML 元 标签 ， 用 来 简略 描述 网 页 的 主要 
内 容 , 通常 被 搜索 引擎 用 在 搜索 结果 页 上 给 最 终 用 户 看 的 一 段 文字 片段 。 页 面 描述 在 网 页 中 是 
不 显示 出 来 的 ， 页 面 描述 的 使 用 格式 如 下 : 

<meta name="description" content=" 网 页 的 介绍 " /> 

例如 ， 定 义 对 页 面 的 描述 ， 代 码 如 下 : 

<meta name="description" content=" 免 费 的 web 技术 教程 。" /> 

(4) 页面 定时 跳 转 

使 用 <meta> 标 记 可 以 使 网 页 经 过 一 定时 间 后 自动 刷新 , 这 可 通过 将 http-equiv 属性 值 设置 
为 refresh 来 实现 。content 属性 值 可 以 设置 为 更 新 时 间 。 

在 浏览 网 页 时 经 常会 看 到 一 些 欢迎 信息 的 页 面 , 在 经 过 一 段 时 间 后 , 这 些 页 面 会 自动 转 到 
其 他 页 面 ， 这 就 是 网 页 的 跳 转 。 页 面 定时 刷新 跳 转 的 语法 格式 如 下 : 

<meta http-equiv="refresh" content=" 秒 ;[url= 网 址 ]" /> 

说 明 : 上 面 的 [anl= 网 址 ] 部 分 是 可 选项 ， 如 果 有 这 部 分 ， 页 面 定 时 刷新 并 跳 转 ， 如 果 省 略 


该 部 分 ， 页 面具 定时 刷新 ， 不 进行 跳 转 。 
例如 ， 实 现 每 5 秒 刷新 一 次 页 面 ， 将 下 述 代 码 放 入 head 标记 部 分 即 可 : 


<meta http-equiv="refresh" content="5" /> 
4.2.5 网 页 的 主体 标记 


网 页 所 要 显示 的 内 容 都 放 在 网 页 的 主体 标记 内 ， 它 是 HTML 文件 的 重点 所 在 。 主 体 标记 
是 以 <body> 开 始 ， 以 </body> 标 记 结束 ， 语 法 格式 如 下 : 


<body> 


</body> 
注意 ， 在 构建 HTML 结构 时 ， 标 记 不 允许 交错 出 现 ， 和 否则 会 造成 错误 。 
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例如 ， 在 下 列 代码 中 ，<body> 开 始 标 记 出 现在 <head> 标 记 内 : 


<html> 
<head> 
<title> 标 记 测 试 </title> 
<body> 
</head> 


</body> 
</html> 


代码 中 的 第 4 行 <body> 开 始 标记 和 第 5 行 的 <head> 结 束 标记 出 现 了 交叉 ， 这 是 错误 的 。 
HIML 中 所 有 代码 都 不 允许 交错 出 现 。 


4.2.6 页 面 注释 标记 


注释 是 在 HTML 代码 中 插入 的 描述 性 文本 ， 用 来 解释 该 代码 或 提示 其 他 信息 。 注 释 只 出 
现在 代码 中 ， 浏 览 器 对 注释 代码 不 进行 解释 ， 并 且 在 浏览 器 的 页 面 中 不 显示 。 

在 HTML 源 代码 中 适当 的 地 插入 注释 语句 是 一 种 非常 好 的 习惯 。 对 于 设计 者 日 后 的 代码 
修改 、 维 护 工作 很 有 好 处 。 另 外 ， 如 果 将 代码 交 给 其 他 设计 者 ， 其 他 人 也 能 很 快 读 懂 前 者 所 把 
写 的 内 容 。 

语法 : 


<L- 注 释 的 内 容 --> 


注释 语句 元 素 由 前 后 两 半 部 分 组 成 , 前 半 部 分 一 个 左 尖 括 号 、 一 个 半角 感叹 号 和 两 个 连 字 
符 头 ， 后 半 部 分 由 两 个 连 字 符 和 一 个 右 尖 括号 组 成 。 


<html> 

<head> 

<title> 标 记 测 试 </title> 

</head> 

<body> 

<!-- 这 里 是 标题 -> 

<hl>HTML 5 从 入 门 到 精通 </h1> 
</body> 

</html> 


页 面 注释 不 但 可 以 对 HTML 中 一 行 或 多 行 代码 进行 解释 说 明 , 而 且 可 能 注释 掉 这 些 代码 。 
如 果 希 望 某 些 HTML 代码 在 浏览 器 中 不 显示 ， 可 以 将 这 部 分 内 容 放 在 “<! 一 ”和 “-->” 之 间 ， 
例如 ， 修 改 上 述 代 码 ， 如 下 所 示 : 

<html> 


<head> 
<title> 标 记 测 试 </title> 
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</head> 

<body> 

2 

<hl>HITML 5 从 入 门 到 精通 </h1> 
-> 

</body> 

</html> 


修改 后 的 代码 ， 将 <h1l> 标 记 作为 注释 内 容 处 理 ， 在 浏览 器 中 将 不 会 显示 这 部 分 内 容 。 


4.3 综合 实例 一 一 符合 W3C 标准 的 HTML 5 网 页 


下 面 制作 一 个 简单 的 符合 W3C 标准 的 HTML 5 网 页 ， 以 巩固 前 面 所 学 知识 。 

具体 操作 步 又 如 下 : 

iD 划 启动 Dreamweaver CS5.5， 新 建 HTML 文档 ， 并 切 单 击 文档 工具 栏 中 的 “代码 ” 视 
图 按钮 ， 切 换 至 代码 状态 ， 如 图 4-2 所 示 。 


图 4-2 使 用 Dreamweaver CS5.5 新 建 HTML 文档 


to3 图 4-2 中 的 代码 是 XHTML 1.0 格式 , 尽管 与 HTML 5 完全 兼容 , 但 是 为 了 简化 代码 ， 
现在 将 其 修改 成 HTML 5 规范 。 修 改 文档 说 明 部 分 、<html> 标 记 部 分 和 <meta> 元 信息 部 分 ， 
修改 后 ，HTML 5 基本 结构 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 
<title>HTML 5 网 页 设计 </title> 
</head> 


<body> 
</body> 
</html> 


I03| 在 网 页 主体 中 添加 内 容 ， 在 body 部 分 增加 如 下 代码 : 
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<!-- 白 居 易 诗 --> 
<h1> 续 座右铭 </h1> 


<P> 


千里 始 足下 ,<br> 
高 山 起 微 侍 。<br> 
在 道 亦 如 此 ,<br 
行 之 贵 日 新 。<br> 


</P> 


9 弛 保存 网 页 ， 在 IE 9.0 中 的 预览 效果 ， 如 图 4-3 所 示 。 


写 ] [ML5 规 范 网 页 htm| 内 - CX 
文件 () ”编辑 (E) ”查看 (V) 。 收藏 夫 (A) 工具 T) 素 ” 


续 座右铭 


于 里 始 足下 ， 


高 山 起 微 尘 。 
吾 道 亦 如 此 ， 
行 之 贵 日 新 。 


图 4-3 网 页 预览 效果 


4.4 问题 解答 


1. 在 网 页 中 ， 语 言 的 编码 方式 有 哪些 ? 
在 HIML 5 网 页 中 ，<meta> 标 记 的 charset 属性 用 于 设置 网 页 的 内 码 语系 ， 也 就 是 字符 集 


的 类 型 ， 中 


国 常用 的 是 GB 码 ， 因 为 在 中 国 要 经 常 显示 汉字 ， 通 常设 置 为 GB2312 (简体 中 文 ) 


和 UTF-8 两 种 。 英 文 是 ISO-8859-1 字符 集 ， 此 外 还 有 其 他 的 字符 集 ， 这 里 不 再 介绍 。 

2. 在 网 页 中 基本 标签 是 否 必须 成 对 出 现 ? 

在 HIML 5 网 页 中 ， 大 部 分 标签 都 成 对 出 现 ， 不 过 也 有 部 分 标签 可 以 单独 出 现 。 例 如 换 
行 标签 <p/>、<br/>、<img/> 和 <hr/> 等 。 


第 5 章 HTML5 中 的 文本 和 图 像 


文字 和 图 像 是 网 页 中 最 主要 也 是 最 常用 的 元 素 。 因 此 在 这 一 章 , 开始 讲解 如 何在 网 页 中 使 
用 文字 、 文 字 结构 标记 以 及 图 像 。 


5.1 添加 文本 


网 页 中 的 文本 可 以 分 为 两 大 类 : 一 类 是 普通 文本 ， 另 外 一 类 是 特殊 字符 文本 。 
5.1.1 普通 文本 


所 谓 普通 文本 是 指 汉字 或 者 在 键盘 上 可 以 输出 的 字符 。 读 者 可 以 在 Dreamweaver CS5.5 代 
码 视 图 的 body 标签 部 分 直接 输入 ;或 者 在 设计 视图 下 直接 输入 。 

如 果 有 现成 的 文本 ， 可 以 使 用 复制 、 粘 贴 的 方法 把 其 他 窗口 中 需要 的 文本 复制 过 来 。 在 粘 
贴 文本 的 时 候 ， 如 果 只 希望 把 文字 粘贴 过 来 ， 而 不 需要 粘贴 其 他 文档 中 的 格式 ， 可 以 使 用 
Dreamweaver CS5.5 的 “选择 性 粘贴 ”功能 。 

“选择 性 粘贴 ”功能 只 在 Dreamweaver CS5.5 的 设计 视图 中 起 作用 ， 因 为 在 代码 视图 中 ， 
粘贴 的 是 “ 仅 文 本 ”， 不 会 有 格式 。 例 如 ， 将 Word 文档 表格 中 的 文字 复制 到 网 页 中 ， 而 不 需 
要 表格 结构 。 操 作 方 法 : 选择 “编辑 ”一 “选择 性 粘贴 .……” 或 按 下 快捷 键 Ctrl+ShifttV， 弹 出 
“选择 性 粘贴 ”对 话 框 ， 在 对 话 框 中 选择 “ 仅 文 本 ”选项 ， 如 图 5-1 所 示 。 


选择 性 粘贴 Ea 
粘贴 为 : mr 
回 仅 文本 () 本 | 
侣 带 结构 的 文本 (段落 、 列 表 、 表格 等 ) 6) 
问 带 结构 的 文本 以 及 基本 格式 ( 碍 体 、 科 体 ) GB) 二 


人 刁 带 结构 的 文本 以 及 全 部 格式 〈 粗 体 、 斜 体 、 样 式 ) ) 
保留 换行 符 BR) 
清理 Yord 段落 间距 C) 


图 5-1 “选择 性 粘贴 ”对 话 框 


5.1.2 ”特殊 字符 文本 


目前 ， 很 多 行业 信息 都 出 现在 网 络 上 ， 每 个 行业 都 有 自己 的 行业 特性 ， 如 数学 、 物 理 和 化 
学 都 有 特殊 的 符号 。 如 何在 网 页 上 显示 这 些 特殊 符号 是 这 节 为 读者 讲述 的 内 容 。 
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在 HTML 中 ， 特 殊 符 号 以 “人 ”符号 开头 ， 后 面 跟 相 关 字符 。 例 如 ， 大 括号 和 小 括号 被 
于 声明 标记 ， 因 此 如 果 在 HIML 代码 中 出 现 “<” 和 “>” 字 符 ， 就 不 能 能 下 接 锁 人 了， 需要 
当 作 特殊 字符 处 理 。HTML 中 ， 用 “&lt” 代 表 符 号 “<”， epee pet “7 

输入 公式 a>b， 在 HTML 中 需要 这 样 表示 : a&gtb。 

HTML 中 还 有 大 量 这 样 的 字符 ， 例 如 ， 空 格 、 版 权 等 ， 常 用 特殊 字符 如 下 表 所 示 。 


显示 说 明 HTML 编码 
半角 大 的 空白 Kensp; 
全 角 大 的 空白 &emsp; 
不 断 行 的 空白 格 &nbsp; 

< 小 于 &lt; 

> 太太 &gt 
及 符号 &amp; 
双 引 号 &quot' 

@ 版 权 &copy; 

® 己 注 册 商 标 Rreg; 

商标 (美国 ) Rtrade; 

x 乘 号 &times; 

二 除 号 &divide: 

在 编辑 化 学 公式 或 物理 公式 时 , 使 用 特殊 字符 的 频率 非常 高 。 如 果 每 次 输入 时 都 去 查询 或 


者 要 记忆 这 些 特殊 符号 的 编码 ， 工 作 量 是 相当 大 的 。 在 此 作者 为 读者 提供 一 些 技 巧 。 

(1) 在 Dreamweaver CS5.5 的 设计 视图 下 输入 字符 ， 如 输入 a>b 这 样 的 表达 式 ， 可 以 直 
接 输入 。 对 于 部 分 键盘 上 没有 的 字符 可 以 借助 “中 文 输入 法 ”的 软 键盘 。 在 中 文 输入 法 的 软 键 
盘 上 单 击 鼠 标 右键 ， 弹 出 特殊 类 别 项 ， 如 图 5-2 所 示 。 选 择 所 需 类 型 ， 如 选择 “数学 符号 ”， 
弹出 数学 相关 符号 ， 如 图 5-3 所 示 。 单 击 “ 二 ”号 ， 即 可 输入 。 


PC 键盘 标点 符号 
希腊 字母 数字 序号 
俄 文 宇 母 数学 符号 
”注音 符号 。 |。 单位 符号 
拼 音 。 制 表 符 
昌文 平 假 各 。 | 特殊 符号 
日 交 片 假名 
本 极品 王 生 [915 
图 5-2 特殊 符号 分 类 图 5-3 数学 符号 


(2) 文字 与 文字 之 间 的 空格 ， 如 果 超 过 一 个 ， 那 么 从 第 2 个 空格 开始 ， 都 会 被 忽略 掉 。 
快捷 的 输入 空格 的 方法 如 下 : 将 输入 法 切换 成 “中 文 输入 法 ”， 并 和 置 于 “全 角 ”(Shift+ 空 格 ) 


精通 HTML 5 网 页 设计 


状态 ， 直 接 单 击 键盘 上 的 空格 键 即 可 。 

(3) 对 于 上 述 两 种 方法 都 无 法 实现 的 字符 ， 可 以 使 用 Dreamweaver CS5.5 的 “插入 ” 菜 
单 实 现 。 选 择 “插入 ”一 “HTML ”一 “特殊 字符 ”菜单 命令 ， 在 所 需要 的 字符 中 选择 ， 如 果 
没有 ， 选 择 “ 其 他 字符 ...” 选 项 。 


尽量 不 要 使 用 多 个 “&nbsp” 来 表示 多 个 空格 ， 因 为 多 数 浏览 器 对 空格 的 距离 的 实 
注 现 是 不 一 样 的 。 


5.1.3 文本 特殊 样式 
在 文档 中 经 常会 出 现 重要 文本 (加 粗 显 示 ) 、 和 斜体 文本 、 上 标 和 下 标 文本 等 。 
1. 重要 文本 
重要 文本 通常 以 粗 体 显示 、 强 调 方式 显示 或 加 强调 方式 显示 。HTML 中 的 <b> 标 记 、<em> 


标记 和 <strong> 标 记分 别 实现 了 这 三 种 显示 方式 。 
【 例 5.1】〔 实 例文 件 ，ch05\5.1.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 无 标题 文档 </title> 

</head> 

<body> 
<p><b> 我 是 粗 体 文字 </b></p> 
<p><em> 我 是 强调 文字 </em></p> 
<p><strong> 我 是 加 强调 文字 </strong></p> 
</body> 

</html> 


在 正 9.0 中 的 预览 效果 如 图 5-4 所 示 ， 实 现 了 文本 的 三 种 显示 方式 。 
-一 一 一 一 pe 


HH 


我 是 粗 体 文字 
刁 寿 理 洒 基 闻 
我 是 加 强调 文字 


图 5-4 重要 文本 预览 效果 
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2. 和 斜体 文本 


HTML 中 的 <i> 标 记 实 现 了 文本 的 斜体 显示 。 放 在 “<>”、“</i>” 之 间 的 文本 将 以 斜体 


【 例 5.2】 (实例 文件 ， ch05\5.2.html) 


<!DOCTYPE html> 

<html> 

<head> 
<title> 无 标题 文档 </title> 
</head> 

<body> 

<i> 我 将 会 以 斜体 字 显 示 </i> 
</body> 

</html> 


在 下 9.0 中 的 预览 效果 如 图 5-5 所 示 ， 其 中 文字 以 斜体 显示 。 


EE 
WW 
| Rhos2hm| P- oC xB 


文件 站 注 驻 (E) 于 看 V) 。 交 重 关 (A) 工具 (Tm 冲动 (H) 


瑰 焰 会 以 立 厅 字 昌 示 


图 5-5 斜体 文本 预览 效果 


HTML 中 的 “重要 文本 ”和 和 斜体 文本 标记 已 经 过 时 ， 可 使 用 CSS 样式 来 实现 ,而 
不 是 使 用 HTML 来 实现 。 随 着 后 面 的 学 习 ， 读 者 会 发 现 ， 即 使 HTML 和 CSS 实 
注 现 相 同 的 效果 ， 但 是 CSS 所 能 实现 的 控制 远 比 HTML 要 细致 、 精 确 很 多 。 


3. 上 标 和 下 标 文本 


在 HIML 中 用 <sup> 标 记 实现 上 标 文字 ， 用 <sub> 标 记 实 现下 标 文字 。<sup> 和 <sub> 都 是 
双 标 记 ， 放 在 开始 标记 和 结束 标记 之 间 的 文本 会 分 别 以 上 标 或 下 标 形式 出 现 。 
【 例 5.3】 《实例 文件 ， ch05\5.3.html) 


<!DOCTYPE html> 
<html> 
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<head> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

<!- 上 标 显示 --> 
<p>c=a<sup>2</sup>+b<sup>2</sup></p> 

<!- 下 标 显示 -~ 
<p>H<sub>2</sub>+O 一 H<sub>2</sub>O</p> 
</body> 

</html> 

在 正 9.0 中 的 预览 效果 如 图 5-6 所 示 ， 分 别 实现 了 上 标 和 下 标 文本 显示 。 


pg EssEes| 芭 
Ca 全 ftchos\s3html P ~ © x | @ EE 


文件 (月 ” 媚 强 (E) 下 看 (V) ”收藏 关 (A) 工具 (T) 。 帮 动 (H) 


c=a2Hb2 


HHtO->Ho0 


图 5-6 上 标 和 下 标 预览 效果 
5.2 ”排版 文本 


在 网 页 中 如 果 要 把 文字 合理 地 显示 出 来 , 离 不 开 段 落 标记 的 使 用 。 对 网 页 中 文字 段落 进行 
排版 ， 并 不 像 文本 编辑 软件 Word 那样 可 以 定义 许多 模式 来 安排 文字 的 位 置 。 在 网 页 中 要 让 某 
一 段 文 字 放 在 特定 的 地 方 是 通过 HIML 标记 来 完成 的 。 

5.2.1 段落 标记 与 换行 标记 

浏览 器 在 显示 网 页 时 , 完全 按照 HTML 标记 来 解释 HTML 代码 , 忽略 多 余 的 空格 和 换行 。 
在 HTML 文件 里 ， 不 管 输入 多 少 空格 〈 按 空格 键 ) 都 将 被 视 为 一 个 空格 ; 换行 〈 按 Enter 键 ) 
也 是 无 效 的。 在 HTML 中 ， 换 行使 用 <br> 标 记 ， 段 落 使 用 <p> 标 记 。 

1. 换行 标记 <br> 

换行 标记 <br> 是 一 个 单 标记 ， 它 没有 结束 标记 ,是 英文 单词 break 的 缩写 ， 作 用 是 将 文字 在 
一 个 段 内 强制 换行 。 一 个 <br> 标 记 代 表 一 个 换行 ， 连 续 的 多 个 标记 可 以 实现 多 次 换行 。 使 用 换 
行 标记 时 ， 在 需要 换行 的 位 置 添加 <br> 标 记 即 可 。 例 如 下 面 的 代码 ， 实 现 了 对 文本 的 强制 换行 。 
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【 例 5.4】“〔 实 例文 件 :， ch05\5.4.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 文 本 段 换行 </title> 

</head> 

<body> 

本 节目 标 <br/> 

网 页 中 的 文字 是 如 何 设置 的 <br/> 

如 何在 Dreamweaver 中 处 理 文字 <br/> 
如 何 对 文本 进行 格式 化 CSS) <br/> 
热 悉 使 用 Dreamweaver 进行 样式 表 的 创建 与 应 用 


</body> 
</html> 
虽然 在 HTML 源 代码 中 ， 主 体 部 分 的 内 容 在 排版 上 没有 换行 ， 但 是 增加 <br> 标 记 后 ， 在 


IE 9.0 中 的 预览 效果 如 图 5-7 所 示 ， 实 现 了 换行 效果 。 
pr Ei 
区 SS 中 ] 代码 \ch05\5.4.html 只 ”CX | 夺 文 二 让 33 行 
文件 (月 ” 编 邵 (E) ”各 看 (V) ”收藏 突 (A) 工具 (T) 帮助 (H) 
本 节目 标 
网 页 中 的 文字 是 如 何 设 置 的 
如 何在 Dreamweaver 中 处 理 文字 


如 何 对 文本 进行 格式 化 (CSS) 
熟悉 使 用 Dreamweaver 进 行 样式 表 的 创建 与 应 用 


图 5-7 换行 标记 的 效果 
2. 段落 标记 <p> 


段落 标记 是 双 标记 ， 即 <p></p>， 在 <p> 开 始 标记 和 </p> 结 束 标记 之 间 的 内 容 形 成 一 个 段 
落 。 如 果 省 略 结束 标记 ， 那 么 从 <p> 标 记 开 始 ， 直 到 遇见 下 一 个 段落 标记 之 前 的 文本 ， 都 在 一 
段 段 落 内 。 段 落 标记 中 的 p 是 英文 单词 paragraph 即 “段落 ” 的 首 字母 ， 用 来 定义 网 页 中 的 一 
段 文本 ， 文 本 在 一 个 段落 中 会 自动 换行 。 

【 例 5.5】 《实例 文件 :ch0S\5.5.html) 


<!DOCTYPE html> 
<html> 
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<head> 

<title> 段 落 标记 的 使 用 </title> 

</head> 

<body> 

<p>HTML 5、CSS3 应 用 教程 之 跟 DIV 说 Bey!Bey!</p> 

<p>Web 设计 师 可 以 使 用 HTML4 和 CSS2.1 完成 一 些 很 酷 的 东西 。 我 们 可 以 在 不 使 用 陈旧 的 基于 table 
布局 的 基础 上 完成 文档 逻辑 结构 并 创建 内 容 丰富 的 网 站 .我们 可 以 在 不 使 用 内 联 <font> 和 <br> 标 签 的 基础 上 对 
网 站 添加 漂亮 而 细腻 的 风格 样式 。 事 实 上 ， 我 们 目前 的 设计 能 力 已 经 让 我 们 远离 了 那个 可 怕 的 浏览 器 战争 时 
代 、 专 有 协议 和 那些 充满 内 动 、 滚 动 和 闪烁 的 丑陋 网 页 。 

<p> 


SB 

虽然 我 们 现在 已 经 普遍 使 用 了 HIML4 和 CSS2.1， 但 是 我 们 还 可 以 做 得 更 好 ! 我 们 可 以 重组 我 们 代码 的 
结构 并 能 让 我 们 的 页 面 代码 更 富有 语义 化 特性 。 我 们 可 以 缩减 带 给 页 面 美丽 外 观 样式 代码 量 并 让 他 们 有 更 高 
的 可 扩展 性 。 现 在, HTML 5 和 CSS3 正 跃跃欲试 的 等 待 大 家 ， 下 面 让 我 们 来 看 看 他 们 是 否 真 的 能 让 我 们 的 设 
计 提 升 到 下 一 个 高 度 吧 … 

</p> 

xp 

曾经 ， 设 计 师 们 经 常会 跟 频 繁 使 用 基于 table 的 没有 任何 语义 的 布局 。 不 过 最 终 还 是 要 感谢 像 Jeffrey 
Zeldman 和 Eric Meyer 这 样 的 思想 革新 者 ， 聪 明 的 设计 师 们 慢 慢 的 接受 了 相对 更 语义 化 的 <div> 布 局 替代 了 
table 布局 ， 并 且 开 始 调用 外 部 样式 表 。 但 不 幸 的 是 ， 复 杂 的 网 页 设计 需要 大 量 不 同 的 标签 结构 代码 ， 我 们 把 
它 叫 做 “<div>-soup” 综合 症 。 

</p> 


</html> 


在 下 9.0 中 的 预览 效果 如 图 5-8 所 示 ，<P> 标 记 将 文本 分 成 4 个 段落 。 


| 
代 现 wh05\5.5jtml 月 ”0 X | 大 久 芝 标的 使 用 


IE) 豆 委 (V)。 履 评 空 (工具 [者 动 (H) 
HTmIL5、CSS3 应 用 教程 之 跟 DTV 说 Bey!Bey! 


Web 设 计 师 可 以 使 用 HDL4 和 CSS2. 1 完成 一 些 很 酷 的 东西 。 我 们 可 以 在 不 使 用 陈 
旧 的 基于 table 布 局 的 基础 上 完成 文档 逻辑 结构 并 创建 内 容 丰富 的 网 站 。 我 们 
可 以 在 不 使 用 内 联 和 

标签 的 基础 上 对 网 站 添加 漂亮 而 细腻 的 风格 样式 。 事 实 上 ， 我 们 目前 的 设计 能 
力 已 经 让 我 们 远 高 了 那个 可 怕 的 浏览 器 战争 时 代 、 专 有 协议 和 那些 充满 办 动 、 
滚动 和 闪 糙 的 丑 古 网 页 。 


“ 


a 1， 但 是 我 们 还 可 以 做 得 更 好 ! 我 
人 人生 全 位 并 管 二 大 人 的 面 代 太 更 富有 语义 化 特性 。 我 们 可 
样式 代码 仙人 人 本 和 扩展 性 ， 现 在 ， 
Hm fess ER 等 竺 大家 ,下面 让 区 们 来 着 看 他 们 是 真能 让 我 
们 的 设计 提升 到 下 一 个 高 度 吧 … 


曾经 ， 设 计 师 们 经 常会 跟 频 繁 使 用 基于 table 的 没有 任何 语义 的 布局 。 不 过 最 
终于 是 要 感 澳 像 Jeffrcy Zeldran 和 aric Heyer 这 样 的 思想 革新 者， 聪明 的 设 

计 师 们 慢 慢 的 接受 了 相对 更 语义 化 的 

布局 痊 代 了 table 布 后 ， 并 且 开始 调用 外 部 样式 表 。 但 不 幸 的 是 ,复杂 的 网 页 | 
放 和 入 全 人生 下 同 二 各 和 和 人 全， 我 们 把 E 叫 做“ 司 


图 5-8 段落 标记 的 使 用 
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5.2.2 ”标题 标记 


在 HTML 文档 中 ， 文 本 的 结构 除了 以 行 和 段 出 现 之 外 ， 还 可 以 作为 标题 存在 。 通 常 一 篇 


文档 最 基本 的 结构 就 是 由 若干 不 同 级 别 的 标题 和 正文 组 成 的 。 
HTML 文档 中 包含 有 各 种 级 别 的 标题 ， 各 种 级 别 的 标题 


1<h1> 到 <h6> 元 素来 定义 ，<hl1> 


至 <h6> 标 题 标记 中 的 字母 h 是 英文 headline (标题 行 ) 的 简称 。 共 
最 高 ， 文 字 也 最 大 ， 其 他 标题 元 素 依次 递减 ，<h6> 级 别 最 低 。 
【 例 5.6】 (实例 文件 ，ch05\5.6.html) 


<!IDOCTYPE html> 

<html> 

<head> 
<title> 文 本 段 换行 </title> 
</head> 

<body> 

<h1> 这 里 是 1 级 标题 </h1> 
<h2> 这 里 是 2 级 标题 </h2> 
<h3> 这 里 是 3 级 标题 </h3> 
<h4> 这 里 是 4 级 标题 </h4> 
<h5> 这 里 是 5 级 标题 </h5> 
<h6> 这 里 是 6 级 标题 </h6> 
</body> 

</html> 


在 正 9.0 中 的 预览 效果 如 图 5-9 所 示 。 


[= 区 相 
x 和 
帮助 (H) 


K SD 司 fchos56hml D - OX 
文件 月” 注 强 (E) 下 看 (V) 次 运 关 (A) 工具 (站 ) 


这 里 是 1 级 标题 
这 里 是 2 级 标题 
这 里 是 3 级 标题 


这 里 是 4 级 标题 


这 里 是 5 级 标题 


这 里 是 6 级 标 时 


图 5-9 标题 标记 的 使 用 


作为 标题 ,它们 的 重要 性 是 有 区 别 的 , 其 中 <hl> 标 题 的 


中 <h1> 代 表 1 级 标题 ,级别 


重要 性 最 高 ，<h6> 的 最 低 。 
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5.3 ”建立 文本 列表 


使 用 文本 列表 可 以 有 序 地 编排 一 些 信息 资源 , 使 其 结构 化 和 条 理化 , 并 以 列表 的 样式 显示 
出 来 ， 以 便 浏 览 者 能 更 加 快捷 地 获得 相应 信息 。HTML 中 的 文字 列表 如 同文 字 编 辑 软件 Word 
中 的 项 目 符号 和 自动 编号 。 


5.3.1 建立 无 序列 表 


无 序列 表 相 当 于 Word 中 的 项 目 符号 ,无 序列 表 的 项 目 排列 没有 顺序 ， 只 以 符号 作为 分 项 
标识 。 无 序列 表 使 用 一 对 标记 <ul></ul>， 其 中 每 一 个 列表 项 使 用 <li></li>， 其 结构 如 下 所 示 。 


<Ul> 
<1i> 无 序列 表 项 </i> 
<1i> 无 序列 表 项 </li> 
<1i> 无 序列 表 项 </li> 
<1i> 无 序列 表 项 </li> 
</ul> 


在 无 序列 表 结 构 中 ， 使 用 <ul></ul> 标 记 表 示 这 个 无 序列 表 的 开始 和 结束 ，<li> 则 表示 一 个 
列表 项 的 开始 。 在 一 个 无 序列 表 中 可 以 包含 多 个 列表 项 ， 并 且 <li> 可 以 省 略 结 束 标记 。 下 面 实 
例 使 用 无 序列 表 实 现 文本 的 排列 显示 。 

【 例 5.7】 (实例 文件 ， ch05\5.7.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 幅 套 无 序列 表 的 使 用 </title> 
</head> 


<body> 
<hl> 网 站 建设 流程 <hl> 
<u> 
<1i> 项 目 需求 <4i> 
<1i> 系 统 分 析 
<u> 
< 这 网 站 的 定位 </li> 
< 这 内 容 收 集 </li> 
<li> 栏 目 规划 </i> 
<li> 网 站 目录 结构 设计 </i> 
<li> 网 站 标志 设计 < 人 li> 
<li> 网 站 风格 设计 </i> 
<li> 网 站 导航 系统 设计 </i> 
</ul> 


在 下 9.0 中 的 预览 效果 如 图 5-10 所 示 。 读 者 会 发 现 ,无 序列 表 项 中 ， 可 以 棋 套 一 个 列表 。 
如 代码 中 的 “系统 分 析 ” 列 表 项 和 “ 伪 网 页 草图 ”列表 项 中 都 有 下 级 列表 , 因此 在 这 对 <li></l> 
标记 间 又 增加 了 一 对 <ul></ul> 标 记 。 


sen 7hel Dox [seme “| 


. 
。 制 作 网 页 草图 
。 将 草图 转 顽 为 网 页 


,网 页 布局 
“网 站 员 斌 
1 站 点 的 发 布 与 站 点 管 理 


图 5-10 无 序列 表 
5.3.2 ”建立 有 序列 表 


有 序列 表 类 似 于 Word 中 的 自动 编号 功能 , 有 序列 表 的 使 用 方法 和 无 序列 表 的 使 用 方法 基 
本 相同 ， 它 使 用 标记 <ol></ol>， 每 一 个 列表 项 前 使 用 <li></li>。 每 个 项 目 都 有 前 后 顺序 之 分 ， 
多 数 用 数字 表示 ， 其 结构 如 下 : 


下 面 实例 使 用 有 序列 表 实现 文本 的 排列 显示 。 
【 例 5.8】〔 实 例文 件 ， ch05\5.8.html) 


在 正 9.0 中 的 预览 效果 如 图 5-11 所 示 。 用 户 可 以 看 到 新 添加 的 有 序列 表 。 


图 5-11 有 序列 表 的 效果 
5.3.3 ”建立 不 同类 型 的 无 序列 表 
通过 使 用 多 个 <ul> 标 签 ， 可 以 建立 不 同类 型 的 无 序列 表 。 


【 例 5.9】 (实例 文件 ， ch05\5.9.html) 


在 正 9.0 中 的 预览 效果 如 图 5-12 所 示 。 


5-12 不 同类 型 的 无 序列 表 


5.3.4 ”建立 不 同类 型 的 有 序列 表 


通过 使 用 多 个 <ol> 标 签 ， 可 以 建立 不 同类 型 的 有 序列 表 。 
【 例 5.10】 《实例 文件 ， ch05\5.10.html) 


在 下 9.0 中 的 预览 效果 如 图 5-13 所 示 。 


5-13 不 同类 型 的 有 序列 表 


5.3.5 嵌 套 列表 
嵌 套 列表 是 网 页 中 常用 的 元 素 ， 使 用 <ul> 标 签 可 以 制作 网 页 中 的 嵌 套 列表 。 


【 例 5.11】 《实例 文件 ，ch0s\S.11.html) 


在 正 9.0 中 的 预览 效果 如 图 5-14 所 示 。 


5-14， 羽 套 列表 


5.3.6 自 定 义 列 表 


在 HIML 5 中 还 可 以 自 定 义 列表 ， 标 签 是 <dl>。 
【 例 5.12】 【实例 文件 ，ch05\5.12.html) 
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<html> 

<body> 

<h2> 一 个 定义 列表 : </h2> 

<dl> 

<de 电 脑 </dt> 

<dd> 是 一 种 能 够 按照 程序 运行 的 电子 设备 .……</dd> 
<df> 显 示 器 </df> 

<dd> 以 视觉 方式 显示 信息 的 装置 ……</dd> 
</d> 

</body> 

</html> 


在 下 9.0 中 的 预览 效果 如 图 5-15 所 示 。 


a] ©) HAUsersAdminist PD - © X | @ HNusersAdmin 
文件 (月 。 演 各 (E) 各 看 (V) 收藏 于 (A) 工具 (T) 帮助 (H) 


一 个 定义 列表 : 


电脑 
吕 示 是 一 种 能 够 按照 程序 运行 的 电子 设备 ……. 
示 
以 视觉 方式 显示 信息 的 装置 


图 5-15 自 定义 列表 


5.4 添加 图 像 


俗话 说 “一 图 胜 千言 ”， 图 片 是 网 页 中 不 可 缺少 的 元 素 ， 巧 妙 地 在 网 页 中 使 用 图 片 可 以 为 


网 页 增色 不 少 。 网 页 支持 多 种 图 片 格式 ， 并 且 可 以 对 插入 的 图 片 设置 宽度 和 高 度 。 
5.4.1 网 页 支持 的 图 片 格式 


图 像 在 网 页 中 具有 画龙点睛 的 作用 , 它 能 装饰 网 页 ， 表达 个 人 的 情调 和 风格 。 但 在 网 页 上 
加 入 的 图 片 越 多 ， 浏 览 的 速度 就 会 受到 影响 。 网 页 中 使 用 的 图 像 可 以 是 GIF、JPEG、BMP、 


TIFF、PNG 等 格式 的 图 像 文件 ， 其 中 使 用 最 广泛 的 主要 是 GIF 和 JPEG 两 种 格式 。 
1. GIF 格式 


GIF 格式 是 由 Compuserve 公司 提出 的 与 设备 无 关 的 图 像 存储 标准 ,也 是 Web 上 使 


最 早 、 


应 用 最 广 的 图 像 格式 。GIF 是 通过 减少 组 成 图 像 像素 的 存储 位 数 和 LZH 压缩 存储 技术 来 减少 


图 像 文 件 的 大 小 的 ，GIF 格式 最 多 只 能 是 256 色 的 图 像 。 
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GIF 具有 图 像 文件 短小 、 下 载 速度 快 的 特点 ， 在 低 颜 色 数 下 GIF 比 JPEG 装载 更 快 ， 可 上 
许多 具有 同样 大 小 的 图 像 文 件 组 成 动画 ， 在 GIF 图 像 中 可 指定 透明 区 域 ， 使 图 像 具 有 非 同 一 
2. JPEG 格式 


JPEG 格式 是 在 目前 Intemet 中 最 受 欢 迎 的 图 像 格式 ，JPEG 可 支持 多 达 16MB 的 颜色 ， 能 
展现 十 分 生动 的 图 像 , 还 能 压缩 。 但 压缩 方式 是 以 损失 图 像 质量 为 代价 的 ， 压缩 比 越 高 图 像 质 
量 损 失 越 大 ， 图 像 文 件 也 就 越 小 。 

而 Windows 支持 的 位 图 BMP 格式 的 图 像 ， 一 般 情况 下 ， 同 一 图 像 的 BMP 格式 的 大 小 是 
JPEG 格式 的 5~10 倍 。 而 GIF 格式 最 多 只 能 是 256 色 , 因此 载 入 256 色 以 上 图 像 的 JPEG 格式 
成 了 Intemet 中 最 受 欢 迎 的 图 像 格式 。 

当 网 页 中 需要 载 入 一 个 较 大 的 GIF 或 JPEG 图 像 文 件 时 ， 装 载 速 度 会 很 慢 。 为 改善 网 页 的 
视觉 效果 ， 可 在 载 入 时 设置 为 隔行 扫描 。 隔 行 扫 描 在 开始 显示 图 像 时 看 起 来 非常 模糊 ， 接 着 细 
节 逐 渐 添 加 上 去 直到 图 像 完全 显示 出 来 。 


现在 网 页 中 也 有 很 多 PNG 格式 的 图 片 。PNG 图 片 具有 不 失真 、 兼 有 GIF 和 JPG 
的 色彩 模式 、 网 络 传输 速度 快 、 支 持 透 明 图 像 制 作 的 特点 ， 近 年 来 在 网 络 中 也 很 
注 流行 。 


5.4.2 ”在 网 页 中 使 用 路 径 


HTML 文档 支持 文字 、 图 片 、 声 音 、 视 频 等 媒体 格式 ， 但 是 在 这 些 格式 中 ， 除 了 文本 是 
写 在 HTML 中 的 ， 其 他 都 是 嵌入 式 的 ，HTML 文档 只 记录 了 这 些 文件 的 路 径 。 这 些 媒体 信息 

路 径 的 作用 是 定位 一 个 文件 的 位 置 。 文件 的 路 径 可 以 有 两 种 表述 方法 , 以 当前 文档 为 参照 
物 表示 文件 的 位 置 ， 即 相对 路 径 。 以 根 目录 为 参照 物 表 示 文 件 的 位 置 ， 即 绝对 路 径 。 

为 了 方便 讲述 绝对 路 径 和 相对 路 径 ， 现 有 目录 结构 ， 如 图 5-16 所 示 。 


图 5-16 目录 结构 
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1. 绝对 路 径 


例如 ,在 E 盘 的 webs 目录 下 的 images 下 有 一 个 印 jpg 图 像 ， 那 么 它 的 路 径 就 是 
E:\webs\images\tp.jpg, 像 这 种 完整 地 描述 文件 位 置 的 路 径 就 是 绝对 路 径 。 如 果 将 图 片 文件 tp.jpg 
插入 到 网 页 index.html， 绝 对 路 径 表 示 方 式 如 下 : 


E:\webs\images\tp.jpg 


如 果 使 用 了 绝对 路 径 E\webs\images\tpjpg 进行 图 片 链接 ,那么 在 本 地 计算 机 中 将 一 切 正常 ， 
因为 在 E\webs\images 下 的 确 存在 tpjpg 这 个 图 片 。 如 果 将 文档 上 传 到 网 站 服务 器 上 后 ,就 不 会 
正常 了 ， 因 为 服务 器 划分 的 存放 空间 可 能 在 EE 盘 其 他 目录 中 ， 也 可 能 在 DD 盘 其 他 目录 中 。 为 了 
保证 图 片 正常 显示 ， 必 须 从 webs 文件 夹 开始 ， 放 到 服务 器 或 其 他 计算 机 的 卫 盘 根 目录 下 。 

通过 上 述 讲解 ， 读 者 会 发 现 ， 如 果 链 接 的 资源 是 本 站 点 内 的 ， 则 使 用 绝对 路 径 对 位 置 要 
求 非常 严格 。 因 此 ,链接 本 站 内 的 资源 时 不 建议 采用 绝对 路 径 。 如 果 链 接 其 他 站 点 的 资源 ， 则 
必须 使 用 绝对 路 径 。 

2. 相对 路 径 


如 何 使 用 相对 路 径 设置 上 述 图 片 呢 ?所 谓 相 对 路 径 ， 顾 名 思 义 就 是 以 当前 位 置 为 参考 点 ， 
自己 相对 于 目标 的 位 置 。 例 如 ， 在 index.html 中 连接 tp.jpg 就 可 以 使 用 相对 路 径 。index.html 
和 tpjpg 图 片 的 路 径 根 据 上 述 目 录 结 构图 可 以 这 样 来 定位 ,从 index.html 位置 出 发 , 它 和 images 
属于 同 级 ， 路 径 是 通 的， 因此 可 以 定位 到 images，images 的 下 级 就 是 tp.jpg。 使 用 相对 路 径 表 
示 图 片 如 下 : 


images/tpjpg 


使 用 相对 路 径 ， 不 论 将 这 些 文件 放 到 哪里 ， 只 要 tp.jpg 和 index.html 文件 的 相对 关系 没有 
在 相对 路 径 中 ，“..” 表 示 上 一 级 目录 ，“../.” 表 示 上 级 的 上 级 目录 ， 依 此 类 推 。 例 如 ， 
将 thjpg 图 片 插入 到 ahtml 文件 中 ， 使 用 相对 路 径 表示 如 下 : 


-/images/tp.jpg 


细心 的 读者 会 发 现 ， 路 径 分 隔 符 使 用 了 “\” 和 “/” 两 种 ， 其 中 “\ ”表示 本 地 分 
隔 符 ，“/” 表 示 网 络 分 隔 符 。 因 为 网 站 制作 好 后 肯定 是 在 网 络 上 运行 ， 因 此 要 求 
注 使 用 “/” 作 为 路 径 分 隔 符 。 
有 的 读者 可 能 会 有 这 样 的 疑惑 : 一 个 网 站 有 许多 的 链接 ， 怎 么 能 保证 它们 的 链接 都 正确 ， 
如 果 调整 了 图 片 或 网 页 的 存储 路 径 ， 那 不 是 全 乱 了 吗 ? 如 何 提高 工作 效率 呢 ? 


Dreamweaver 工具 的 站 点 管理 功能 , 不 但 可 以 将 绝对 路 径 自 动 地 转化 为 相对 路 径 ， 


提示 并 且 当 在 站 点 中 改动 文件 路 径 时 ， 与 这 些 文件 关联 的 链接 路 径 都 会 自动 更 改 。 
有 
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5.4.3 在 网 页 中 插入 图 像 
图 像 可 以 美化 网 页 ， 插 入 图 像 使 用 单 标记 <img>。img 标记 的 属性 及 描述 如 下 表 所 示 。 


属性 值 描述 
alt text 定义 有 关 图 形 的 描述 
SIC URL 要 显示 的 图 像 的 URL 
height pixels % 定义 图 像 的 高 度 
ismap URL 把 图 像 定义 为 服务 器 端的 图 像 映射 
定义 作为 客户 端 图 像 映射 的 一 幅 图 像 ; 请 参阅 <map> 
usemap URL vo a 
和 <area> 标 签 ， 了 解 其 工作 原理 
vspace 定义 图 像 顶 部 和 底部 的 空白 ， 请 使 用 CSS 代替 
width pixels % 设置 图 像 的 宽度 


1. 插入 图 像 
src 属性 用 于 指定 图 片 源 文 件 的 路 径 ， 它 是 img 标记 必 不 可 少 的 属性 。 语 法 格式 如 下 : 
<img src=" 图 片 路 径 "> 


图 片 的 路 径 可 以 是 绝对 路 径 ， 也 可 以 是 相对 路 径 。 下 面 的 实例 是 在 网 页 中 插入 图 片 。 
【 例 5.13】 《实例 文件 ，ch05S\5.13.html) 


<!IDOCTYPE html> [eee | 


<html> a | reachoss om P - © x | BE 
ead 文件 (站 绢 (E) 各 看 | 站 节 穴 (A) 工具 孝 凤 (H) 


<title> 插 入 图 片 </title> 
</head> 
<body> 
<img src="images/meishi.jpg"> 
</body> 
</html> 
在 正 9.0 中 的 预览 效果 如 图 5-17 所 示 。 
2. 从 不 同位 置 插入 图 像 


在 插入 图 片 时 ， 用户 可 以 将 其 他 文件 夹 或 服 图 5.17 插入 图 片 
务 器 的 图 片 显示 到 网 页 中 。 
【 例 5.14】〔 实 例文 件 :， ch05\5.14.html) 


<!DOCTYPE html> 
<html> 

<body> 

Sp 
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来 自 一 个 文件 夹 的 图 像 : 

<img src="images/meishi.jipg" /> 

</p> 

“p> 

来 自 baidu 的 图 像 : 

<img src="http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif" /> 
</p> 

</body> 

</html> 


在 正 9.0 中 的 预览 效果 如 图 5-18 所 示 。 


性 
来 自 一 个 文件 去 的 图 像 ， 


Bai 字 百度 


来 自 bai 4 的 图 俐 ， 


图 5-18 插入 图 片 
5.5 ”编辑 图 像 
在 插入 图 片 时 ， 用 户 还 可 以 编辑 网 页 中 的 图 像 。 


5.5.1 设置 图 像 的 宽度 和 高 度 


在 HTML 文档 中 ， 还 可 以 设置 插入 图 片 的 大 小 ， 一 般 是 按 原始 尺寸 显示 ， 也 可 以 设置 显 
示 尺 寸 。 设 置 图 像 尺 寸 分 别 用 属性 width 宽度 ) 和 height 高度) 。 
【 例 5.15】 “实例 文件 : ch0S\5.15.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 插 入 图 片 </title> 

</head> 

<body> 

<img src="images/meishi.jpg"> 
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<img src="images/meishi.jpg" width="200"> 

<img src="images/meishi.ipg" width="200" height="300"> 
</body> 

</html 


在 下 9.0 中 的 预览 效果 ， 如 图 5-19 所 示 。 


(C8) WmsRraihattons 10hm P - Cx| Bs 和 
六 4 六 EV SR RT 


图 5-19 设置 图 片 的 宽度 和 高 度 
由 图 可 以 看 到 ， 图 片 的 显示 尺寸 是 由 width 宽度) 和 height (高 度 ) 控制 的 。 当 只 为 图 
片 设置 一 个 尺寸 属性 时 , 另外 一 个 尺寸 就 以 图 片 原始 的 长 宽 比例 来 显示 。 图 片 的 尺寸 单位 可 以 
选择 百分比 或 数值 。 百 分 比 为 相对 尺寸 ， 数 值 是 绝对 尺寸 。 


以 对 于 网 页 中 插入 的 图 像 都 是 位 图 ， 放 大 尺寸 ， 图 像 会 出 现 马 赛 克 ， 变 得 模糊 。 
注 


在 Windows 中 查看 图 片 的 尺寸 , 只 需要 找到 图 像 文件 , 把 鼠标 指针 移动 到 图 像 上 ， 
停留 几 秒 后 ， 就 会 出 现 一 个 提示 框 ， 说 明 图 像 文件 的 尺寸 。 尺 寸 后 显示 的 数字 ， 
提 示 代表 图 像 的 宽度 和 高 度 ， 如 256 x 256。 


5.5.2 ”设置 图 像 的 提示 文字 


图 像 提 示 文 字 的 作用 有 两 个 : 一 是 当 浏 览 网 页 时 ， 如果 图 像 下 载 完 成 , 将 鼠标 指针 放 在 该 
图 像 上 ， 鼠 标 指针 旁边 会 出 现 提示 文字 ， 为 图 像 添加 说 明 性 文字 ; 二 是 ， 如 果 图 像 没 有 成 功 下 
载 ， 在 图 像 的 位 置 上 就 会 显示 提示 文字 。 

随 着 互联 网 技术 的 发 展 ， 网 速 已 经 不 是 制约 因素 ,因此 一 般 都 能 成 功 下 载 图 像 。 现在 ，alt 
还 有 另外 一 个 作用 ， 即 在 百度 、Google 等 大 搜索 引擎 中 ， 搜 索 图 片 不 如 文字 方便 ， 如 果 给 图 
片 添加 适当 提示 ， 可 以 方便 搜索 引擎 的 检索 。 

下 面 实例 将 为 图 片 添加 提示 文字 效果 。 
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【 例 5.16】〔 实 例文 件 :， ch05\5.16.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 图 片 文字 提示 </title> 

</head> 

<body> 

<img src="images/meishi.jpg" alt=" 草 莓 甜 橙 沙 拉 "> 

</body> 

</html> 

在 正 9.0 中 的 预览 效果 如 图 5-20 所 示 。 用 户 将 鼠标 放 在 图 片上 时 ， 即 可 看 到 提示 文字 。 

~ FE 区 可 
| a) ELE P - CX | GE x 
文件 (有 ” 蝙 强 (E) 。 豆 看 (V) ” 履 语 闪 (A) ”工具 (T) 大 动 (H) 
图 5-20 图 片 文字 提示 
在 Firefox 中 不 支持 该 功能 。 


注 
5.5.3 ”设置 图 片 为 网 页 背景 
在 插入 图 片 时 ， 用 户 可 以 根据 需要 将 某 些 图 片 设置 为 网 页 的 背景 。GIF 和 JPG 文件 均 可 


用 作 HTML 背景 。 如 果 图 像 小 于 页 面 ， 图 像 会 进行 排列 。 
【 例 5.17】 《实例 文件 :ch05\5.17.html) 


<!DOCTYPE html> 

<html> 

<body background="images/background.jpg"> 
<h3> 图 像 背景 </h3> 
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</body> 
</html> 

在 下 9.0 中 的 预览 效果 如 图 5-21 所 示 。 

pe Ei 


-一 
了 WE HUsersAdminist P - © X | @ Huserswdministr- 
文件 (F) 病 庄 (E) 。 豆 看 (V) 。 收 若 闪 (A) 工具 (T) 大 动 (H} 


图 5-21 图 片 背景 
5.5.4 ”排列 图 像 
在 网 页 的 文字 当中 ， 如 果 插 入 图 片 ， 这 时 可 以 对 图 像 进行 排序 。 常 用 的 排序 方式 为 居中 


底部 对 齐 、 顶 部 对 齐 。 
【 例 5.18】〔 实 例文 件 ，ch05\5.18.html) 


<!DOCTYPE html> 

<html> 

<body> 

<h2> 未 设置 对 齐 方式 的 图 像 : </h2> 

<p> 图 像 <img src ="images/logo.gif'> 在 文本 中 </p> 

<h2> 已 设置 对 齐 方式 的 图 像 : </h2> 

<p> 图 像 <img src=" images/logo.gif " align="bottom"> 在 文本 中 </p> 
<p> 图 像 <img src =" images/logo.gif " align="middle"> 在 文本 中 </p> 
<p> 图 像 <img src =" images/logo.gif" align="top"> 在 文本 中 </p> 
</body> 

</html> 


在 焉 9.0 中 的 预览 效果 如 图 5-22 所 示 。 
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Te Eih 


| HsersAdmiristrst P - SX || HALsers dninistat.. < Ex 
文件 由 迪 电 旧 可 二 0) 收 大夫 入 工具 站 大 吉 (H) 


未 设置 对 齐 方式 的 图 像 : 


.800 
aeBai 候 国 片 ，， 
已 设 置 对 齐 方式 的 图 像 : 


6869 
aa BaiD 国 片 。,， 


009 
se Bai@d 国 片 “** 


在 文本 中 


图 多 896 
Bai@D 国 片 
图 5-22 图 片 对 齐 方式 


以 bottom 对 齐 方式 是 默认 的 对 齐 方式 。 
注 


5.6 ”综合 实例 一 一 图 文 并 茂 的 房屋 装饰 装修 网 页 


本 章 讲 述 了 网 页 组 成 元 素 中 最 常用 的 文本 和 图 片 。 本 综合 实例 要 创建 一 个 由 文本 和 图 片 构 
成 的 房屋 装饰 效果 网 页 ， 如 图 5-23 所 示 。 


areawowwwmp-，x| eaxvaoxaa < | 


文件 站 办 缔 (下 看 V| 家 下) 工具 [本 赎 (H) 


清新 活力 家 居 与 人 文 简约 悠然 家 居 


图 5-23 房屋 装饰 效果 网 页 
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具体 操作 步骤 如 下 : 
oO 则 在 Dreamweaver CS5.5 中 新 建 HTML 文档 ， 并 修改 成 HTML 5 标准 ， 代 码 如 下 : 


<!DOCTYPE html> 

<html > 

<head> 

<title> 房 屋 装饰 装修 效果 图 </title> 
</head> 

<body> 

</body> 

</html> 


2 在 body 部 分 增加 如 下 HTML 代码 保存 页 面 : 


<p><img src="images/xiyatu.ipg" width="300" height="200"/><img src="images/stadshem.jpg" width="300" 
height="200"/><br /> 

西雅图 原生 态 公寓 室内 设计 与 Stadshem 小 户型 公寓 设计 〔〈 带 阁楼 ) </p> 

<hr/> 

<p><img src="images/qingxinhuolijpe"” width="300" height="200"/><img src="images/renwen.jpg" 
width="300" height="200"/><br /> 

清新 活力 家 居 与 人 文 简约 悠然 家 居 </p> 

<hr 人 > 


<hr> 标 记 的 作用 是 定义 内 容 中 的 主题 变化 ， 并 显示 为 一 条 水 平 线 ， 在 HIML 5 中 
注 它 没有 任何 属性 。 

另外 ， 快 速 插入 图 片 及 设置 相关 属性 ， 可 以 借助 Dreamweaver CS5.5 的 插入 功能 ， 或 按 下 
快捷 键 Ctrl+Alt+I。 


5.7 ”问题 解答 


1. 换行 标记 和 段落 标记 有 哪些 区 别 ? 

换行 标记 是 单 标记 ， 不 能 写 结束 标记 。 段 落 标 记 是 双 标记 ， 可 以 省 略 结束 标记 ， 也 可 以 不 
省 略 。 默 认 情况 下 ， 段 落 之 间 的 距离 和 段落 内 部 的 行 间 距 是 不 同 的 ， 段 落 间 距 比较 大 ， 行 间距 
比较 小 。HTML 无 法 调整 段落 间距 和 行 间 距 ， 如 果 希 望 调整 它们 ， 就 必须 使 用 CSS 。 在 
Dreamweaver CS5.5 的 设计 视图 下 ， 按 下 Enter 键 可 以 快速 换 段 ， 按 下 Shift+ Enter 键 可 以 快速 
换行 。 

2. 无 序列 表 <ul> 元 素 具 有 什么 作用 ? 

无 序列 表 元 素 主要 用 于 条 理化 和 结构 化 文本 信息 。 在 实际 开发 中 , 无 序列 表 在 制作 导航 菜 
单 时 使 用 广泛 ， 导 航 菜单 的 结构 一 般 都 使 用 无 序列 表 实现 。 
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3. 在 浏览 器 中 ， 图 片 无 法 显示 ， 为 什么 ? 

图 片 在 网 页 中 属于 嵌入 对 象 ， 并 不 是 保存 在 网 页 中 的 ， 网 页 只 是 保存 了 指向 图 片 的 路 径 。 
浏览 器 在 解释 HTML 文件 时 ， 会 按 指定 的 路 径 去 寻找 图 片 ， 如 果 在 指定 的 位 置 不 存在 图 片 ， 
就 无 法 正常 显示 。 为 了 保证 图 片 的 正常 显示 ， 制 作 网 页 时 需要 注意 以 下 几 处 。 

(1) 图 片 格式 一 定 是 网 页 支持 的 ; 

(2) 图 片 的 路 径 一 定 要 正常 ， 并 且 图 片 文件 扩展 名 不 能 省 略 ; 

(3) HTML 文件 位 置 发 生 改变 时 ， 图 片 一 定 要 随 着 改变 ， 即 图 片 位 置 和 HIML 文件 位 置 
始终 保持 相对 一 致 。 
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第 6 章 使 用 HTML 5 建立 超 链接 


HTML 文件 中 最 重要 的 应 用 之 一 就 是 超 链接 ， 超 链接 是 一 个 网 站 的 灵魂 ，Web 上 的 网 页 
是 互相 链接 的 ， 单 击 超 链接 的 文本 或 图 形 就 可 以 链接 到 其 他 页 面 。 


6.1 URL 


URL 就 是 人 们 通常 说 的 “网 址 ”， 用 于 指定 Internet 上 的 资源 位 置 。 
6.1.1 URL 的 格式 


网 络 中 的 计算 机 之 间 是 通过 IP 地 址 区 分 的 ， 如 果 希 望 访问 网 络 中 某 台 计算 机 中 的 资源 ， 
首先 要 定位 到 这 台 计 算 机 。IP 地 址 是 由 32 位 的 〈 二 进 制 ) ， 即 32 个 0/1 代码 组 成 ， 数 字 之 间 
没有 意义 ， 不 容易 记忆 。 为 了 方便 记忆 , 现在 计算 机 一 般 采 用 域名 的 方式 来 寻 址 ， 即 在 网 络 上 
使 用 一 组 具有 特殊 意义 的 字符 组 成 的 地 址 代 蔡 人 P 地 址 来 访问 网 络 资源 。 

URL 由 4 个 部 分 组 成 ， 即 “协议 ”、“ 主 机 名 ”、“ 文 件 夹 名 ”和 “文件 名 ”， 如 图 6-1 
所 示 。 


http:/ /wa. webDesign. com/pages/computer. html 
| ee 


协 说 主机 名 文件 来 名 文件 名 
图 6-1 URL 组 成 


互联 网 中 有 各 种 各 样 的 应 用 ， 如 Web 服务 、FTP 服务 等 。 每 种 服务 应 用 都 对 应 相应 的 协 
议 , 通常 通过 浏览 器 浏览 网 页 的 协议 都 是 HTTP 协议 ， 即 “ 超 文本 传输 协议 ”， 因 此 通常 网 页 
的 地 址 都 以 “http:/” 开 头 。 

“www.baidu.com” 为 主机 名 ， 表 示 文 件 存在 于 哪 台 服务 器 ， 主 机 名 可 以 通过 了 P 地 址 或 
者 域名 来 表示 。 

确定 到 主机 后 , 还 需要 说 明文 件 存在 于 这 人 台 服 务 器 的 哪个 文件 夹 中 , 这 里 文件 夹 可 以 分 为 
多 个 层级 。 

确定 文件 夹 后 , 就 要 定位 到 文件 , 即 要 显示 哪个 文件 , 网 页 文件 通常 是 以 “.html” 或 “htm” 
为 扩展 名 。 
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6.1.2 URL 的 类 型 


在 第 5 章 讲解 网 页 中 使 用 图 像 时 ， 已 经 介绍 了 “路 径 ”的 概念 。 对 于 超 链接 来 说 ， 路 径 的 
概念 同样 存在 。 

超 链接 的 URL 可 以 分 为 两 种 类 型 “绝对 URL” 和 “相对 URL”。 

(1) 绝对 URL 一 般 用 于 访问 非 同一 台 服 务 器 上 的 资源 。 

(2) 相对 URL 是 指 访问 同一 台 服 务 器 上 相同 文件 夹 或 不 同文 件 夹 中 的 资源 。 如 果 访 问 相 
同文 件 夹 中 的 文件 ， 只 需要 写 文 件 名 ; 如 果 访 问 不 同文 件 夹 中 的 资源 ，URL 以 服务 器 的 根 目 
录 为 起 点 ， 指 明文 档 的 相对 关系 ， 由 文件 夹 名 和 文件 名 两 部 分 构成 。 

下 面 实 例 为 使 用 绝对 URL 和 相对 URL 实现 超 链 接 。 

【 例 6.1】 《实例 文件 :ch06\6.1.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 绝 对 URL 和 相对 URL</title> 

</head> 

<body> 
单 击 <a hre 合 "http://www.webDesign.conmyindex.html"> 绝 对 URL</a> 链 接 到 webDesign 网 站 首页 <br /> 
单 击 <a hre 全 "02.html"> 相 同文 件 夹 的 URL</a> 链 接 到 相同 文件 夹 中 的 第 2 个 页 面 <br 亿 
单 击 <a href="../pages/03.html"> 不 同文 件 夹 的 URL</a> 链 接 到 不 同文 件 夹 中 的 第 3 个 页 面 

</body> 

</html> 


在 上 述 代码 中 ， 第 一 个 链接 使 用 的 是 绝对 URL; 第 二 个 使 用 的 是 服务 器 相对 URL， 也 就 
是 链接 到 文档 所 在 服务 器 的 根 目录 下 的 02.html; 第 三 个 使 用 的 是 文档 相对 URL， 即 原文 档 所 
在 文件 夹 的 父 文件 夹 下 面 的 pages 文件 夹 中 的 03.html 文件 。 

在 正 9.0 中 预览 网 页 效果 如 图 6-2 所 示 。 


信人 防 万] CNUsers\yingda\C P ~ OX 恒 绝对 URL 和 柜 对 URL 
文件 (F) ”编辑 (E) ”查看 (V) ”收藏 夫 (A) ”工具 (T) ”帮助 (H) 


单 击 绝对 URI 链接 到 webDesign 网 站 首页 


单 击 棚 同 文件 去 的 URI 链 接 到 相同 文件 赤 中 的 第 2 个 页 面 
单 击 不 同文 件 夹 的 URIL 链 接 到 不 同文 忻 夹 中 的 第 3 个 页 面 


图 6-2 绝对 URL 和 相对 URL 


ie 
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6.2 ”创建 超 链 接 


超 链接 就 是 当 用 鼠标 单 击 一 些 文字 、 图片 或 其 他 网 页 元 素 时 , 浏览 器 就 会 根据 其 指示 载 入 
一 个 新 的 页 面 或 跳 转 到 页 面 的 其 他 位 置 。 超 链 接 除了 可 链接 文本 外 ,也 可 链接 各 种 媒体 ,如 声 
音 、 图 像 、 动 画 ， 通 过 它们 可 享受 丰富 多 彩 的 多 媒体 世界 。 

建立 超 链接 所 使 用 的 HTML 标记 为 <a> 和 </a>。 超 链接 最 重要 的 有 两 个 要 素 : 设置 为 超 链 
接 的 网 页 元 素 和 超 链接 指向 的 目标 地 址 。 超 链接 的 基本 结构 如 下 : 


<a href=URIL> 网 页 元 素 </a> 
6.2.1 设置 文本 和 图 片 的 超 链接 


设置 超 链 接 的 网 页 元 素 通常 使 用 文本 和 图 片 。 文 本 超 链接 和 图 片 超 链接 通过 <a></a> 标 记 
实现 ， 将 文本 或 图 片 放 在 <a> 开 始 标记 和 </a> 结 束 标记 之 间 即 可 建立 超 链接 。 下 面 实例 将 实现 
文本 和 图 片 的 超 链接 。 

【 例 6.2】 《实例 文件 :ch06\6.2.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 文 本 和 图 片 超 链接 </title> 

</head> 

<body> 

<a href="a.html"><img src="images/0371.gif"></a> 
<a href="b.html"> 公 司 简 介 </a> 


</body> 
</html> 


在 正 9.0 中 预览 网 页 效果 如 图 6-3 所 示 ， 单 击 图 片 即 可 实现 链接 跳 转 的 效果 。 
(S 中 >】 辐 cNusersyingdac P - dx | 筷 六 
文件 (篇 得 (5 查看 (V) 收藏 夫 (A)。 工具 (T) 1” 


图 6-3 文本 和 图 片 链接 效果 


精 甫 HTML 5 网 页 设计 


链接 图 片 的 外 观 在 不 同 浏览 器 中 的 效果 也 不 尽 相 同 , 例如 在 Firefox 预览 效果 如 图 
注 6-4 所 示 。 


) 文本 和 图 片 超 链接 - Mozilla Firefox 
文件 日 编辑 (E) 音 看 (V 历史 (S) 书签 日 工具 (DD 帮助 (H) 
[所 De 六 cj 加 -spjal 避 sa 噬 


图 6-4 Firefox 浏览 器 预览 效果 


以 在 Firefox 中 ， 图 片 超 链接 不 会 增加 边框 ， 而 在 正中， 图 片 超 链接 会 增加 边框 。 
注 

默认 情况 下 ， 为 文本 添加 超 链接 ， 文 本 会 自动 增加 下 划 线 ， 并 且 文 本 颜色 变 为 蓝 色 ， 单 击 
过 的 超 链 接 , 文本 会 变 成 暗 红色 。 图 片 增加 超 链接 以 后 , 浏览 器 会 自动 给 图 片 增加 一 个 粗 边框 。 
6.2.2 ”设置 超 链接 指向 的 目标 类 型 

通过 上 面 的 讲解 ， 读 者 会 发 现 超 链 接 的 目标 对 象 都 是 “.html” 类 型 的 文件 。 超 链接 不 但 
可 以 链接 到 各 种 类 型 (如 图 片 文件 、 声 音 文件 、 视 频 文件 、Word 文件 等 ) 的 文件 ， 还 可 以 链 
接 到 其 他 网 站 、ftp 服务 器 、 电 子 邮件 等 。 


1. 链接 到 各 种 类 型 的 文件 


超 链接 <a> 标 记 的 href 属性 是 指向 链接 的 目标 ， 目 标 可 以 是 各 种 类 型 的 文件 。 如 果 是 浏览 
器 能 够 识别 的 类 型 ， 会 直接 在 浏览 器 中 显示 ; 如果 是 浏览 器 不 能 识别 的 类 型 ， 在 正 浏览 器 中 
会 弹出 文件 下 载 对 话 框 ， 如 图 6-5 所 示 。 


和 


使 用 HTML 5 建立 超 链接 < 第 6 学 


您 要 对 2.doc 执行 什么 操作 ? 


大 小 : 10.5 KB 
类 型 : Microsoft Word 97 - 2003 
来 自 : C\Users\yingda\Desktop\ 源 代码 \ch04\ 链 接 到 各 种 类 型 文件 


3 打开 (O) 
梅 不 会 自动 保存 该 文件 。 


学 保存 (9) 


小 另存 为 (A) 


图 6-5 正中 的 文件 下 载 对 话 框 
【 例 6.3】〔 实 例文 件 ，ch06\6.3.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 链 接 各 种 类 型 文件 </title> 

</head> 

<body> 

<p><a href="a.html"> 链 接 html 文件 </a></p> 
<p><a href="coffe.jpg"> 链 接 图 片 </a></p> 
<p><a href="2.doc"> 链 接 Word 文档 </a></p> 
</body> 

</html> 


在 下 9.0 中 预览 网 页 效果 如 图 6-6 所 示 。 实 现 链 接 到 html 文件 、 图 片 和 Word 文档 。 


Oy 


6-6 各 种 类 型 的 链接 
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2. 链接 到 其 他 网 站 或 ftp 服务 器 

在 网 页 中 ， 友 情 链接 也 是 推广 网 站 的 一 种 方式 。 下 列 代码 实现 了 链接 到 其 他 网 站 或 ftp 服 
务 器 的 目的 。 

<a hre 人 "http://www.baidu.com"> 链 接 百 度 </a> 

<a hre 全 "ftp://172.16.1.254"> 链 接 到 ftp 服务 器 </a> 


这 里 ftp 服务 器 用 的 是 耳 地 址 。 为 了 保证 代码 的 正确 运行 ， 请 读者 填写 有 效 的 ftp 
证 服务 器 地 址 。 


3. 设置 电子 邮件 链接 


在 某 些 网 页 中 , 当 访 问 者 单 击 某 个 链接 以 后 , 会 自动 打开 电子 邮件 客户 端 软件 , 如 Outlook 
或 Foxmail 等 ， 向 某 个 特定 的 E-mail 地 址 发 送 邮 件 ， 这 个 链接 就 是 电子 邮件 链接 。 电 子 邮 件 
链接 的 格式 如 下 : 

<a hre 全 "mailto: 电 子 邮 件 地 址 " > 网 页 元 素 </a> 

【 例 6.4】〔 实 例文 件 ，ch06\6.4.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 电 子 邮 件 链接 </title> 

</head> 

<body> 

<img src="images/logo.gif" width="119" height="49"> [免费 注册 ][ 登 录 ] 
<a href="mailto:kfdzsi@126.com"> 站 长 信箱 </a> 

</body> 

</html> 


在 正 9.0 中 预览 网 页 效果 如 图 6-7 所 示 ， 实 现 了 电子 邮件 链接 。 


[se 


/WN 
(OD) 姑 ] 代码 \ch04\4.4.html 人 ”C0 X | 大 电子 邮件 链 括 


文件 (月 ”编辑 (E) ”前 看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 


[免费 注册 ][ 登 录 ] 站 长 信箱 


图 6-7 链接 到 电子 邮件 
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当 读 者 单 击 “ 站 长 信箱 ”链接 时 ， 会 自动 弹出 Outlook 窗口 ， 要 求 编写 电子 邮件 ， 如 图 
6-8 所 示 。 


收 件 人 dzsj8l26_com 


抄 送 (QO 


主要 (U): 


» 可 | 


图 6-8 ”Outlook 新 邮件 窗口 
6.2.3 用 新 窗口 显示 超 链 接 页 面 


默认 情况 下 ， 当 单 击 超 链 接 时 ， 目 标 页 面 会 在 当前 窗口 中 显示 ,替换 当前 页 面 的 内 容 。 如 
果 要 在 单 击 某 个 链接 以 后 , 打开 新 的 浏览 器 窗口 并 在 这 个 新 窗口 中 显示 目标 页 面 , 就 需要 使 用 
<a> 标 签 的 target 属性 。 

target 属性 的 取 值 有 4 个 ， 分 别 是 “ blank”、“_self”、“ top” 和 “ _parent”。 由 于 
HTML 5 不 再 支持 框架 ,所 以 “top”“_parent” 这 两 个 取 值 不 常用 。 本 节 仅 为 读者 讲解 “_blank”、 
“_self” 值 。 其 中 ，“_blank” 值 为 在 新 窗口 中 显示 超 链接 页 面 ，“_self” 代 表 在 自身 窗口 中 
显示 超 链 接 页 面 ， 当 省 略 target 属性 时 ， 默 认 取 值 为 “_self”。 

【 例 6.5】 《实例 文件 ,ch06\6.5.html) 


<!DOCTYPE html> 
<html> 

<head> 

<title> 以 新 窗口 方式 打开 </title> 

</head> 

<body> 

<a href="a.html target="_blank"> 新 窗口 </a> 
</body> 


在 正 9.0 中 预览 网 页 效果 如 图 6-9 所 示 。 


图 6-9 新 窗口 页 面 
6.2.4 如何 链接 到 同一 页 面 的 不 同位 置 


在 建立 链接 时 ， 尤 其 是 文字 比较 多 的 网 页 ， 需 要 在 同一 页 面 的 不 同位 置 进行 链接 ， 这 时 就 
需要 建立 同一 网 页 内 的 链接 。 
【 例 6.6】 实例 文件 : ch06\6.6.html) 


“116。 


在 正 9.0 中 预览 网 页 效果 如 图 6-10 所 示 。 


6-10 ”链接 页 面 
单 击 页 面 中 的 链接 ， 即 可 将 “第 4 章 ” 的 内 容 跳 转 到 页 面 顶部 ， 如 图 6-11 所 示 。 


图 6-11 链接 到 “第 4 章 ” 
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6.3 ”创建 热点 区 域 


在 浏览 网 页 时 ， 读 者 会 发 现 ， 当 单 击 一 张 图 片 的 不 同 区 域 ， 会 显示 不 同 的 链接 内 容 ， 这 就 
是 图 片 的 热点 区 域 。 所 谓 图 片 的 热点 区 域 就 是 将 一 个 图 片 划分 成 若干 个 链接 区 域 。 访问 者 单 击 
不 同 的 区 域 会 链接 到 不 同 的 目标 页 面 。 
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域 使 用 标记 <map> 和 <area>， 语 法 格式 如 下 : 


<img src=" 图 片 地 址 " usemap=# 名 称 "> 
<map id="# 名 称 "> 
<area shape="rect" coords="10,10,100,100" href="#"> 
<area shpe="circle" cords="120,120,50" hre 人 ="#"> 
<area shape="poly" coords="78,13,81,14,53,32,86,38" href="#"> 
</map> 
在 上 面 的 语法 格式 中 ， 需 要 读者 注意 以 下 几 点 。 
(1) 要 想 建 立 图 片 热点 区 域 ， 必 须 先 插 入 图 片 。 注 意 ， 图 片 必须 增加 usemap 属性 ， 说 
明 该 图 像 是 热点 区 域 映射 图 像 ， 属 性 值 必须 以 “# ”开头 ， 加 上 和 名字， 如 “#pic”。 那 么 上 面 
- 行 代码 可 以 修改 为 : <img src=" 图 片 地 址 " usemap="f#pic">。 
(2) <map> 标 记 只 有 一 个 属性 id， 其 作用 是 为 区 域 命名 ， 其 设置 值 必须 与 <img> 标 记 的 
usemap 属性 值 相同 ， 修 改 上 述 代码 为 : <map id="#pic"> 
(3) <area> 标 记 主 要 是 定义 热点 区 域 的 形状 及 超 链 接 ， 它 有 三 个 必须 的 属性 。 
@ shape 属性 ， 控 件 划分 区 域 的 形状 ， 其 取 值 有 三 个 ， 分 别 是 rect ( 矩形 )、circle ( 圆 形 ) 
和 poly (多 边 形 )。 
@ coords 属性 ， 控 制 区 域 的 划分 坐标 。 
> 如 果 shape 属性 取 值 为 rect， 那 么 coords 的 设置 值 分 别 为 矩形 在 左上 角 x、y 坐 
标点 和 右 下 角 XxX、y 坐标 点 ， 单 位 为 像素 。 
> 如 果 shape 属性 取 值 为 cirle， 那 么 coords 的 设置 值 分 别 为 圆 形 的 圆心 X、y 坐标 
点 和 半径 值 ， 单 位 为 像素 。 
> 如 果 shape 属性 取 值 为 poly， 那 么 coords 的 设置 值 分 别 为 多 边 形 在 各 个 点 的 x、 
y 坐标 ， 单 位 为 像素 。 
@ href 属性 是 为 区 域 设 置 超 链接 的 目标 ， 设 置 值 为 “#"” 时 ， 表 示 为 空 链接 。 


6.4 创建 浮动 框架 


HTML 5 中 已 经 不 支持 frameset 框架 , 但 是 它 仍然 支持 这 ame 浮动 框架 的 使 用 。 浮动 框架 
可 以 自由 控制 窗口 大 小 , 可 以 配合 表格 随意 地 在 网 页 中 的 任何 位 置 插入 窗口 , 实际 上 就 是 在 窗 
口中 再 创建 一 个 窗口 。 

使 用 这 ame 创建 浮动 框架 的 格式 如 下 : 


使 用 HTML 5 建立 超 链接 < 第 6 学 


<iframe src=" 链 接 对 象 "> 

其 中 ，src 表示 浮动 框架 中 显示 对 象 的 路 径 ， 可 以 是 绝对 路 径 ， 也 可 以 是 相对 路 径 。 例 如 ， 
下 面 的 代码 是 在 浮动 框架 中 显示 百度 网 站 。 

【 例 6.7】 (实例 文件 ，ch06\6.7.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 浮 动 框架 中 显示 百度 网 站 </title> 

</head> 

<body> 

<iframe src="http://www.baidu.com"></iframe> 
</body> 

</html> 


在 下 9.0 中 预览 网 页 效果 如 图 6-12 所 示 。 


pi [=-edEa 
Ke [a CNUserswingdaNc 用 ”0 X | 居 泽 动 检 染 中 显示 百度 。 x 
文件 (入 名 (E) ”查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 


Bai 合 百度- 


网 页 贴吧 知道 MP3 图 片 视频 


加 » 


图 6-12 浮动 框架 效果 
从 预览 结果 可 见 , 浮动 框架 在 页 面 中 又 创建 了 一 个 窗口 , 默认 情况 下 ,浮动 框架 的 宽度 和 
高 度 为 220X 120 像素 。 如 果 需 要 调整 浮动 框架 尺寸 , 需要 使 用 CSS 样式 ; 若 修 改 上 述 浮动 框 
架 尺 寸 ， 要 在 head 标记 部 分 增加 如 下 CSS 代码 : 


<style> 

anet 
width:600px; /宽度 
height:800px; /高 度 
bordernone: /无 边框 

</style> 
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在 正 9.0 中 预览 网 页 效果 如 图 6-13 所 示 。 


De Crete Bon D+ Ox | O Fae=25Aan 
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Bai 党 下 


白 遇 网 责 监 到 志 玫 ME3 图 片 玉生 关 别 


图 6-13 ”修改 宽度 和 高 度 的 浮动 框架 


以 在 HIML 5 中 ，iframe 仅 支 持 src 属性 ， 再 无 其 他 属性 。 
注 


6.5 ”综合 实例 一 一 用 Dreamweaver 精确 定位 热点 区 域 


上 面 讲述 了 HTML 创建 热点 区 域 的 方法 , 但 是 最 让 读者 头痛 的 地 方 ， 就 是 坐标 点 的 定位 。 
对 于 简单 的 形状 还 可 以 ， 如 果 形 状 较 多 且 形 状 复杂 , 确定 坐标 点 这 项 工作 的 工程 量 就 很 大 ， 因 
此 ， 不 建议 使 用 HTML 代码 去 完成 。 这 里 将 为 读者 介绍 一 个 快速 且 能 精确 定位 热点 区 域 的 方 
法 。 在 Dreamweaver CS5.5 可 以 很 方便 的 实现 这 个 功能 。 

使 用 Dreamweaver CS5.5 创建 图 片 热点 区 域 的 具体 操作 步骤 如 下 : 


9 划 创建 一 个 HTML 文档 ， 插 入 一 张 图 片 文 件 ， 如 图 6-14 所 示 。 


图 6-14 插入 图 片 


I02 选择 图 片 ， 在 Dreamweaver CS5.5 中 打开 “属性 ”面板 ， 面 板 左下 角 有 三 个 图 标 按钮 ， 
依次 代表 矩形 、 圆 形 和 多 边 形 热点 区 域 。 单 击 左边 的 “和 矩形 热点 ”工具 图 标 ， 如 图 6-15 所 示 。 


尾 性 


图 像 ，!5K 。 宽 @@) |1001 | 宕 文件 () iaages/04 jp 全 局 着 拆 四 Y 类 @ 无 ~ ©® 
mm | 高 中 67 链接 () OD SS FP 区 

地 图 中 重 直 边 耻 | 目标 @) 边框 @ NoA 
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图 6-15 Dreamweaver CS5.5 中 图 像 的 “属性 ”面板 
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IQ3) 将 鼠标 指针 移动 到 被 选中 的 图 片 ， 以 “创意 信息 平台 ” 栏 中 的 矩形 大 小 为 准 ， 按 下 
鼠标 左 键 ， 从 左上 方向 右 下 方 拖 描 鼠标 ， 得 到 和 矩形 区 域 ， 如 图 6-16 所 示 。 


图 6-16 绘制 矩形 热点 区 域 
io 级 绘制 出 来 的 热点 区 域 呈现 出 半 透 明 状态 ， 效 果 如 图 6-17 所 示 。 


5) 如 果 绘制 出 来 的 矩形 热点 区 域 有 误差 ， 可 以 通过 “属性 ”面板 中 的 “指针 热点 ” 工 
具 进 行 编辑 ， 如 图 6-18 所 示 。 
| te | 
POE 
地 图 Wp 
AN 回 DOV 
图 6-18 “指针 热点 ”工具 


to8j 完成 上 述 操作 之 后 ， 保 持 矩 形 热 点 区 域 被 选中 状态 ， 然 后 在 “属性 ”面板 中 的 “ 链 
接 ” 文 本 框 中 输入 该 热点 区 域 链接 对 应 的 跳 转 目标 页 面 。 

QE 在 “目标 ”下 拉 列 表 框 中 有 4 个 选项 ， 它 们 决定 着 链接 页 面 的 弹出 方式 ， 这 里 如 果 
选择 了 “ _ blank”， 那 么 矩形 热点 区 域 的 链接 页 面 将 在 新 的 窗口 中 弹出 。 如 果 “ 目 标 ”选项 保 
持 空 白 , 就 表示 仍 在 原来 的 浏览 器 窗口 中 显示 链接 的 目标 页 面 , 这 样 , 算 形 热点 区 域 就 设置 好 
也 


to8j 接 下 来 继续 为 其 他 菜单 项 创建 矩形 热点 区 域 。 操 作 方法 请 参阅 步骤 2~ 步 骤 7， 完成 
后 的 效果 如 图 6-19 所 示 。 


S| 


图 6-19 为 其 他 菜单 项 创建 矩形 热点 区 域 


to9j 完成 后 保存 并 预览 页 面 。 可 以 发 现 ， 凡 是 绘制 了 热点 的 区 域 ， 鼠 标 指针 移 上 去 时 就 
会 变 成 手 形 ， 单 击 就 会 跳 转 到 相应 的 页 面 。 
加 0 到 此 ， 网 站 的 导航 就 使 用 热点 区 域 制作 完成 了 。 查 看 此 时 页 面相 应 的 HTML 源 代码 
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如 下 : 


<!IDOCTY?PE html> 

<html> 

<head> 

<title> 创 建 热点 区 域 </title> 

</head> 

<body> 

<img src="images/04.jpg" width="1001" height="87" border="0" usemap="#Map"> 

<map name="Map"> 
<area shape="rect" coords="298,5,414,85" href="#"> 
<area shape="rect" coords="412,4,524,85" href="#"> 
<area shape="rect" coords="525,4,636,88" href="#"> 
<area shape="rect" coords="639,6,749,86" href="#"> 
<area shape="rect" coords="749,5,864,88" href="#"> 
<area shape="rect" coords="861,6,976,86" href="#"> 

</map> 

</body> 

</html> 


可 以 看 到 ，Dreamweaver CS5.5 自动 生成 的 HTML 代码 结构 和 前 面 介绍 的 是 一 样 的 , 但 是 
所 有 的 坐标 都 自动 计算 出 来 了 , 这 正 是 网 页 制作 工具 的 快捷 之 处 。 使 用 这 些 工具 本 质 上 和 手工 
编写 HTML 代码 没有 区 别 ， 只 是 使 用 这 些 工具 可 以 提高 工作 效率 。 


的 操作 ， 请 读者 自行 研究 ， 以 提高 编写 HTML 代码 效率 。 但是， 请 读者 注意 ， 使 
用 网 页 制作 工具 前 ， 一 定 要 明白 这 些 HTML 标记 的 作用 。 因 为 一 个 专业 的 网 页 设 
计 师 必须 具备 HTML 方面 的 知识 ， 不 然 再 强大 的 工具 也 只 能 是 无 根 之 树 ， 无 源 之 


(7 本 书 所 讲述 的 手工 编写 HTML 代码 ， 在 Dreamweaver CS5.5 工具 中 几乎 都 有 对 应 
注 


泉 。 
参照 矩形 热 区 的 操作 方法 ， 为 图 6-20 创建 圆 形 和 多 边 形 热点 区 域 。 


6.6 问题 解答 


1. 在 创建 超 链接 时 ， 使 用 绝对 URL 还 是 相对 URL? 

在 创建 超 链 接 时 ， 如 果 要 链接 的 是 另外 一 个 网 站 中 的 资源 ， 需 要 使 用 完整 的 绝对 URL; 
如 果 在 网 页 中 创建 内 部 链接 ， 一 般 使 用 相对 当前 文档 或 站 点 根 文 件 夹 的 相对 URL。 

2. 链接 增多 后 的 网 站 ， 如 何 设置 目录 结构 以 方便 维护 ? 

当 一 个 网 站 的 网 页 数量 增加 到 一 定 程度 以 后 , 网 站 的 管理 与 维护 将 变 得 非常 繁琐 , 因此 掌 
握 一 些 网 站 管理 与 维护 的 技术 是 非常 实用 的 , 可 以 节省 很 多 时 间 。 建立 适合 的 网 站 文件 存储 结 
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构 , 可 以 方便 网 站 的 管理 与 维护 。 通常 使 用 的 三 种 网 站 文件 组 织 结构 方案 及 文件 管理 遵循 的 原 
则 如 下 : 
@ 按照 文件 的 类 型 进行 分 类 管理 。 将 不 同类 型 的 文件 放 在 不 同 的 文件 夹 中 ， 这 种 存储 方 
法 适合 于 中 小 型 的 网 站 ， 这 种 方法 是 通过 文件 的 类 型 对 文件 进行 管理 的 。 
@ 按照 主题 对 文件 进行 分 类 。 网 站 的 页 面 按 照 不 同 的 主题 进行 分 类 存储 。 同 一 主题 的 所 
有 文件 存放 在 一 个 文件 夹 中 ， 然 后 再 进一步 细 分 文件 的 类 型 ， 这 种 方案 适用 于 页 面 与 
文件 数量 众多 、 信 息 量 大 的 静态 网 站 。 
@ 对 文件 类 型 进行 进一步 细 分 存储 管理 。 这 种 方案 是 第 一 种 存储 方案 的 深化 ， 将 页 面 进 
一 步 细 分 后 进行 分 类 存储 管理 。 这 种 方案 适用 于 文件 类 型 复杂 、 包 含 各 种 文件 的 多 媒 
体 动态 网 站 。 
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在 HTML 中 表格 不 但 可 以 清晰 地 显示 数据 ， 而 且 可 以 用 于 页 面 布局 。HTML 中 表格 类 似 
于 Word 软件 中 的 表格 ,尤其 是 使 用 网 页 制作 工具 ,操作 很 相似 。HTML 制作 表格 的 原理 是 使 
用 相关 标记 ， 如 表格 对 象 table 标记 、 行 对 象 t、 单 元 格 对 象 td 才能 完成 。 


7.1 表格 的 基本 结构 
使 用 表格 显示 数据 ， 可 以 更 直观 和 更 清晰 。 在 HTML 文档 中 表格 主要 用 于 显示 数据 ， 虽 


然 可 以 使 用 表格 布局 ， 但 是 不 建议 使 用 ， 它 有 很 多 弊端 。 表 格 一 般 由 行 、 列 和 单元 格 组 成 ， 如 
图 7-1 所 示 。 


列 
| 


单元 格 


图 7-1 表格 的 组 成 
在 HIML 5 中 用 于 标记 表格 的 标记 如 下 : 


@ ”<table> 标 记 : 用 于 标识 一 个 表格 对 象 的 开始 ，</table> 标 记 标 识 一 个 表格 对 象 的 结束 。 
一 个 表格 中 ， 只 允许 出 现 一 对 <table> 标 记 。 在 HTML 5 中 不 再 支持 它 的 任何 属性 。 

@ <tr> 标记 : 用 于 标识 表格 一 行 的 开始 ，</tr> 标 记 用 于 标识 表格 一 行 的 结束 。 表 格 内 有 
多 少 对 <tr></tr> 标 记 ， 就 表示 表格 中 有 多 少 行 。 在 HTML 5 中 不 再 支持 它 的 任何 属性 。 

@ <td> 标记 : 用 于 标识 表格 某 行 中 的 一 个 单元 格 开始 ，</td> 标 记 用 于 标识 表格 某 行 中 的 
一 个 单元 格 结束 。<td></td> 标 记 书写 在 <tr></tr> 标 记 内 , 一 对 <tr></tr> 标 记 内 有 多 少 对 
<td></td> 标 记 ， 就 表示 该 行 有 多 少 个 单元 格 。 在 HTML 5 中 仅 有 colspan 和 rowspan 
两 个 属性 。 
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最 基本 的 表格 ， 必 须 包含 一 对 <table></table> 标 记 、 一 对 或 几 对 <tr></tr> 标 记 以 及 一 对 或 
几 对 <td></td> 标 记 。 一 对 <table></table> 标 记 定 义 一 个 表格 ， 一 对 <tr></t> 标 记 定义 一 行 ， 一 
对 <td></td> 标 记 定义 一 个 单元 格 ， 例 如 定义 一 个 4 行 3 列 的 表格 。 


【 例 7.1]】 


(实例 文件 ，ch07\7.1.html) 


<!IDOCTY?PE html> 


<html> 
<head> 


<title> 表 格 基 本 结构 </title> 


</head> 

<body> 

<table borde; 
<tr> 


="]"> 


<td>Al</td> 
<td>B1</td> 
<td>C1l</td> 


</tr> 
<tr> 


<td>A2</td> 
<td>B2</td> 
<td>C2</td> 


</tr> 
<tr> 


<td>A3</td> 
<td>B3</td> 
<td>C3</td> 


</tr> 
<tr> 


<td>A4</td> 
<td>B4</td> 
<td>C4</td> 


</tr> 
</table> 
</body> 
</html> 


在 下 9.0j 


预览 网 页 效果 如 图 7-2 所 示 。 


从 预览 图 中 ， 读 者 会 发 现 ， 表 格 没有 边框 ， 行 高 及 列 宽 也 无 法 控制 。 讲 述 上 述 知 
识 时 ， 提 到 HIML 5 中 除了 刀 标记 提供 两 个 单元 格 合并 属性 之 外 ，<table> 和 <tr> 
提 示 。 标记 也 没有 任何 属性 。 


精通 HTM 5 网 页 设计 


ETEES | 


“一 


a HA\usersAdminist PD - 0 X | @ 志 民 芭 本 结构 
文件 (将 台 (E) 得 看 V) 收 荡 夫 (A) 工具 (Tm 帮助 H) 


IIBIC1 
IA2|IB2||IC2| 
A3|IB3||C3) 
A4|IB4|IC4| 


图 7-2 表格 基本 结构 
7.2 表格 的 基本 操作 


了 解 了 表格 的 基本 结构 后 ， 下 面 来 介绍 表格 的 基本 操作 ,主要 包括 创建 表格 、 设 置 表格 的 
边框 类 型 、 设 置 表格 的 表 头 、 合 并 单元 等 。 


7.2.1 创建 表格 
表格 可 以 分 为 普通 表格 以 及 带 有 标题 的 表格 两 种 ， 可 以 在 HIML 5 中 创建 这 两 种 表格 。 
1. 创建 普通 表格 


例如 创建 1 列 、1 行 3 列 和 2 行 3 列 等 三 个 表格 。 
【 例 7.2】 《实例 文件 ， ch07\7.2.html) 


<!DOCTYPE html> 
<html> 
<body> 
<h4> 一 列 : </h4> 
<table border="1"> 
<tr> 
<td>100</td> 
</tr> 
</table> 
<h4> 一 行 三 列 : </h4> 
<table border="1"> 
<tr> 
<td>100</td> 
<td>200</td> 
<td>300</td> 
</tr> 
</table> 


在 焉 9.0 中 预览 网 页 效果 如 图 7-3 所 示 。 


图 7-3 程序 运行 结果 
2. 创建 带 有 标题 的 表格 


有 时 ， 为 了 方便 表述 表格 ， 还 需要 在 表格 上 面 加 上 标题 ， 例 如 创建 一 个 带 有 标题 的 表格 。 
【 例 7.3】 实例 文件 :ch07\7.3.html) 


在 IE 9.0 中 预览 网 页 的 效果 如 图 7-4 所 示 。 


图 7-4 程序 运行 结果 
7.2.2 ”定义 表格 的 边框 类 型 


使 用 表格 的 border 属性 可 以 定义 表格 的 边框 类 型 ， 如 常见 的 加 粗 边框 表格 ， 例 如 创建 不 
同 边框 类 型 的 表格 。 
【 例 7.4】 《实例 文件 : ch07\7.4.html) 


在 正 9.0 中 预览 网 页 的 效果 如 图 7-5 所 示 。 


图 7-5 程序 运行 结果 
7.2.3 ”定义 表格 的 表 头 
表格 当中 也 存在 有 表 头 , 常见 的 表 头 分 为 垂直 与 水 平 两 种 , 例如 分 别 创建 带 有 垂直 和 水 平 


表 头 的 表格 。 
【 例 7.5】 《实例 文件 : ch07\7.5-html) 


在 正 9.0 中 预览 网 页 的 效果 如 图 7-6 所 示 。 


7-6 程序 运行 结果 


5 用 39 这 
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7.2.4 设置 表格 背景 
创建 好 表格 后 ， 为 了 美观 还 可 以 设置 表格 的 背景 。 
1. 定义 表格 背景 颜色 


为 表格 添加 背景 颜色 是 美化 表格 的 一 种 方式 ， 例 如 为 表格 添加 背景 颜色 。 
【 例 7.6】 实例 文件 ，ch07\7.6.html) 


I 


<!DOCTYPE html> 
<html> 
<body> 
<h4> 背 景 颜色 : </h4> 
<table border="1" 
bgcolor="green"> 
<tr> 
<td>100</td> 
<td>200</td> 
</tr> 
<tr> 
<td>300</td> 
<td>400</td> 
</tr> 
</table> 


</html> 
在 正 9.0 中 预览 网 页 的 效果 如 图 7-7 所 示 。 


[1FGJ] 区 可 
S| HAuserswAdminis P - © x | @ HAUsersAdmin; 


文件 (月 ” 蝙 饮 (E) ”得 看 (V) 收藏 闪 (A) 。 工具 (TD) 帮助 (H) 


背景 颜色 : 


图 7-7 程序 运 


A 
el 


2. 定义 表格 背景 图 片 
除了 可 以 为 表格 添加 背景 颜色 外 , 还 可 以 将 图 片 设 置 为 表格 的 背景 , 例如 为 表格 添加 背景 


图 片 。 
【 例 7.7】 实例 文件 ，ch07\7.7.html) 


在 正 9.0 中 预览 网 页 的 效果 如 图 7-8 所 示 。 


7-8 程序 运行 结果 
7.2.5 ”设置 单元 格 背 景 


除了 可 以 为 表格 设置 背景 外 ， 还 可 以 为 单元 格 设置 背景 ， 例 如 为 单元 格 添加 背景 。 
【 例 7.8】〈 实 例文 件 ，ch07\7.8.html) 


132 
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<table border="1"> 

<tr> 
<td bgcolor="red">100000</td> 
<td>200000</td> 

</tr> 

<tr> 
<td background="images/1.gif'>200000</td> 
<td>300000</td> 

</tr> 

</table> 


</body> 
</html> 


在 正 9.0 中 预览 网 页 的 效果 如 图 7-9 所 示 。 


Je 
rs Administ D = © X| @ HAuserswd 
可 看 (V) 收藏 亲 (A) 工具 (T) 帮助 (H) 


单元 格 背景 


200000 
区 ooogj30oooo 


图 7-9 程序 运行 结果 


7.2.6 合并 单元 格 


在 实际 应 用 中 , 并 非 所 有 表格 都 是 规范 的 几 行 几 列 ， 而 是 需要 将 某 些 单元 格 进行 合并 ， 以 
符合 某 种 内 容 上 的 需要 。 在 HTML 中 合并 的 方向 有 两 种 ， 一 种 是 上 下 合并 ， 一 种 是 左右 合并 ， 
这 两 种 合并 方式 只 需要 使 用 td 标记 的 两 个 属性 。 

1. 用 colspan 属性 合并 左右 单元 格 

左右 单元 格 的 合并 需要 使 用 td 标记 的 colspan 属性 完成 ， 格 式 如 下 : 

<td colspan=" 数 值 "> 单元 格 内 容 </td> 

其 中 ，colspan 属性 的 取 值 为 数值 型 整数 ， 代 表 几 个 单元 格 进行 左右 合并 。 

例如 ， 在 上 面 表格 的 基础 上 ， 将 Al 和 B1 单元 格 合并 成 一 个 单元 格 。 为 第 一 行 的 第 一 个 


<td> 标 记 增 加 colspan="2" 属 性 ， 并 且 将 B1 单元 格 的 <td> 标 记 删 除 。 
【 例 7.9】 “实例 文件 ， ch07\7.9.html) 


<!DOCTYPE html> 


在 下 9.0 中 预览 网 页 的 效果 如 图 7-10 所 示 。 


7-10 ”单元 格 左右 合并 
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从 预览 图 中 可 以 看 到 ，Al 和 B1 单元 格 合 并 成 了 一 个 单元 格 ，C1 还 在 原来 的 位 置 上 。 


合并 单元 格 以 后 ， 相 应 的 单元 格 标记 就 应 该 减少 ， 例 如 ，Al 和 Bl 合并 后 ，B1 
单元 格 的 <td></td> 标 记 就 应 该 丢掉 ， 否 则 单元 格 就 会 多 出 一 个 ， 并 且 后 面 单 元 格 
注 依次 向 右 位 移 。 


2. 用 rowspan 属性 合并 上 下 单元 格 
上 下 单元 格 的 合并 需要 为 <td> 标 记 增加 rowspan 属性 ， 格 式 如 下 : 
<td rowspan=" 数 值 "> 单元 格 内 容 </td> 


其 中 ，rowspan 属性 的 取 值 为 数值 型 整数 ， 代 表 几 个 单元 格 进行 上 下 合并 。 
例如 ， 在 上 面 表格 的 基础 上 ， 将 Al 和 A2 单元 格 合并 成 一 个 单元 格 。 为 第 一 行 的 第 一 个 
<td> 标 记 增 加 rowspan="2" 属 性 ， 并 且 将 A2 单元 格 的 <td> 标 记 删 除 。 

【 例 7.10】 【实例 文件 ，ch07\7.10.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 单 元 格 左 右 合 并 </title> 
</head> 
<body> 
<table border="1"> 
<tr> 
<td rowspan="2">A1</td> 
<td>B1</td> 
<td>Cl</td> 
</tr> 
<tr> 
<td>B2</td> 
<td>C2</td> 
</tr> 
<tr> 
<td>A3</td> 
<td>B3</td> 
<td>C3</td> 
</tr> 
<tr> 
<td>A4</td> 
<td>B4</td> 
<td>C4</td> 


在 正 9.0 中 预览 网 页 的 效果 如 图 7-11 所 示 。 


图 7-11 单元 格 上 下 合并 


从 预览 图 中 可 以 看 到 ，Al 和 A2 单元 格 合并 成 了 一 个 单元 格 。 

通过 上 面 对 左 右 单元 格 合并 和 上 下 单元 格 合并 的 操作 ， 读 者 会 发 现 ， 合 并 单元 格 就 是 “ 丢 
掉 ” 某 些 单元 格 。 对 于 左右 合并 ， 就 是 以 左 侧 为 准 ， 将 右 侧 要 合并 的 单元 格 “ 丢 掉 ”; 对 于 上 
下 合并 ， 就 是 以 上 侧 为 准 ， 将 下 侧 要 合并 的 单元 格 “ 丢 掉 ”。 如 果 一 个 单元 格 既 要 向 右 合 并 ， 
又 要 向 下 合并 ， 该 如 何 实现 呢 ? 

【 例 7.11】 《实例 文件 ，ch07\7.11.html) 
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[ao 和 仆 HNUsersAdminist ”0 X | 大 间 元 从 万 右 生 并 
文 伯 (。 兰考 E) 豆 看 (V) ”收藏 实 (A 工具 [可 屿 [H) 


AlB1 IC1 
A2B2 [Ea 
Fal 
国 国 田 


图 7-12 ”两 个 方向 合并 单元 格 

从 上 面 的 代码 可 以 看 到 ，A1l 单元 格 向 右 合 并 Bl 单元 格 ， 向 下 合并 A2 单元 格 ， 并 且 A2 
单元 格 向 右 合 并 B2 单元 格 。 

3. 使 用 Dreamweaver CS5.5 合并 单元 格 

使 用 HTML 创建 表格 非常 麻烦 ， 在 Dreamweaver CS5.5 工具 中 ,提供 了 表格 的 快捷 操作 ， 
类 似 于 在 Word 工具 中 编辑 表格 的 操作 。 在 Dreamweaver CS5.5 中 创建 表格 ， 只 需要 单 击 “ 插 
入 ”菜单 下 的 “表格 ”命令 ,在 出 现 的 对 话 框 中 指定 表格 的 行 数 、 列 数 、 宽 度 和 边框 中 ， 即 可 
在 光标 处 创建 一 个 空白 表格 。 选 择 表格 之 后 ， 属 性 面板 提供 了 表格 的 常用 操作 ， 如 图 7-13 所 
示 。 


国 区 行 @ 四 宽 虽 | ”|| 像素 ” 当 | 填充 外 | ”| 齐 刘 四 [| 黄 人 同类 加 | 无 
| 站 列 © 间距 @&) 边框 @)| | 
| 
二 


图 7-13 表格 属性 面板 
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将 鼠标 是 停 于 按钮 上 ， 数 秒 之 后 会 出 现 命令 提示 。 
注 
关于 表格 的 操作 不 在 獒 述 ， 请 读者 自行 操作 ， 这 里 重点 讲解 如 何 使 用 Dreamweaver CS5.5 
合并 单元 格 。 在 Dreamweaver CS5.5 可 视 化 操作 中 ， 提供 了 合并 与 拆 分 单元 格 两 种 操作 。 拆 分 
单元 格 的 操作 , 其 实 还 是 进行 的 合并 操作 。 进 行 单元 格 合并 和 拆 分 时 , 请 将 光标 置 于 单元 格 内 ， 
如 果 选 择 了 一 个 单元 格 ， 拆 分 命令 有 效 ， 如 图 7-14 所 示 。 如 果 选 择 了 两 个 或 两 个 以 上 单元 格 ， 
合并 命令 有 效 。 


[yamtL] | 格式 外 | 无 加 类 无 MBIT 生生 此 二 标题 中 = 

上 Ecss 瑟 名 ) | 无 ~ 链接 中 ) vj 局 上 标 @ 

中 单元 格 。 水 平 包 ) 默认 | 宽 四 | | 不 换行 @) 口 ” 背 最 颜色 GG) [| 页 面 属性 
下 重 直 加 )| 默 认 yj 高 中 标题 E) 

pe 拆 芬 单元 格 


图 7-14 拆 分 单元 格 有 效 
7.2.7 ”排列 单元 格 中 的 内 容 


使 用 align 属性 可 以 排列 单元 格 内 容 ， 以 便 创建 一 个 美观 的 表格 。 
【 例 7.12】〔 实 例文 件 ，ch07\7.12.html) 


<!DOCTYPE html> 
<html> 
<body> 
<table width="400" border="1"> 
<tr> 
<th align="left"> 项 目 </th> 
<th align="right"> 一 月 </th> 
<th align="right"> 二 月 </th> 
</tr> 
<tr> 
<td align="left"> 衣 服 </td> 
<td align="right">$241.10</td> 
<td align="right">$50.20</td> 
</tr> 
<tr> 
<td align="left"> 化 妆 品 </td> 
<td align="right">$30.00</td> 
<td align="right">$44.45</td> 
</tr> 
<tr> 
<td align="left"> 食 物 </td> 


在 正 9.0 中 预览 网 页 的 效果 如 图 7-15 所 示 。 
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7-15 
7.2.8 设置 单元 格 的 行 高 与 列 宽 


使 用 Cell padding 来 创建 单元 格 内 容 与 其 边框 之 间 的 空白 ， 从 而 调整 表格 的 行 高 与 列 宽 。 
【 例 7.13】 实例 文件 ，ch07\7.13.html) 
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</tr> 

</table> 
<h4> 调 整 后 </h4> 
<table border="1" 


cellpadding="10"> 


<t> 
<td>1000</td> 
<td>2000</td> 

</r> 

<t> 
<td>2000</td> 
<td>3000</td> 

</tr> 

</table> 

</body> 

</html> 


在 正 9.0 中 预览 


委 网 页 的 效果 如 图 7-16 所 示 。 


ea [oe 
下 

| HavsersAdminist p - © x | @ Hvsers dministr. 

文件 月 。 蝙 贺 {E] 至 看 V) 次 基 交 (和) 工具 (T) 琶 动 (H) 


图 7-16 程序 运行 结果 


7.3 ”完整 的 表格 标记 


上 面 讲述 了 表格 中 最 常用 也 是 最 基本 的 三 个 标记 <table>、<tr> 和 <td>， 使 用 它们 可 以 构建 


出 最 简单 的 表格 。 为 了 让 表格 结构 更 清楚 ， 以 及 配合 后 面 学 习 的 CSS 样式 ， 可 更 方便 地 制作 


各 种 表格 ， 还 会 出 现 表 头 、 主 体 、 脚 注 等 。 


按照 表格 结构 ， 


可 以 把 表格 的 行 分 组 ， 称 为 “ 行 组 ”。 不 同 的 行 组 具有 不 同 的 意义 。 行 组 


分 为 三 类 一 一 “ 表 头 ”、“ 主 体 ” 和 “脚注 ”。 三 者 相应 的 HTML 标记 依次 为 <thead>、<tbody> 


和 <tfoot>。 


此 外 ， 在 表格 


bh 还 有 两 个 标记 。 标记 <caption> 表 示 表 格 的 标题 。 在 一 行 中 ,除了 <td> 标 记 


表示 一 个 单元 格 以 外 ， 还 可 以 使 用 <th> 表 示 该 单元 格 是 这 一 行 的 “行头 ”。 


【 例 7.14】“〔〈 实 例文 件 ，ch07\7.14.html) 


从 上 面 的 代码 可 以 发 现 ， 使 用 caption 表格 定义 了 表格 标题 ，<thead>、<tbody> 和 <tfoot> 
标记 对 表格 进行 了 分 组 。 在 <thead> 部 分 使 用 <th> 标 记 代 替 <td> 标 记 定 义 单元 格 ，<th> 标 记 定 
义 的 单元 格 默认 加 粗 ， 网 页 预览 的 效果 如 图 7-17 所 示 。 


精 殉 HTImL 5 网 页 设计 


3 国 HANUsersAdminist P ~ © X | @ etliia 

文件 (月 ” 编 强 (E) ”查看 (V) ”收藏 夫 (A) ”工具 (帮助 (H) 

学 生成 绩 单 
姓名 | 性别 | 成 绩 | 
来 三 属 “|B60 
座 四 | 邯 ll520 
著 欧 分 [640 


图 7-17 完整 的 表格 结构 


<caption> 标 签 必须 紧 随 <table> 标 签 之 后 。 


7.4 综合 实例 一 一 制作 计算 机 报价 表 


利用 所 学 的 表格 知识 ， 制 作 如 图 7-18 所 示 的 计算 机 报价 表 。 


计算 机 报价 单 


型 号 类 型 价格 图 片 


宏基 (Acen) AS4552-P352G32MNCC 笔记 本 于 2799 入 
就 尔 Dem 14VR-188 竹 记 本 丫 3499| 
联 姐 (Lenovo) GT0AH2310W42Gs00P7cW3IDE).CH 牧 记 本 | 站 4149 区 
戴尔 家 用 DELL) I560SR-656 各 式 |¥¥3599| | 


室 图 奇 肪 (Heke9) BS-5508-TF 各 式 |¥3399 


联 租 (Lenove) G470 匡 记 本 4299| J | 


图 7-18 计算 机 报价 单 


具体 操作 步骤 如 下 : 
to 划 新 建 HTML 文档 ， 并 对 其 简化 ， 代 码 如 下 : 


t93 保存 HTML 文件 ， 选 择 相应 的 保存 位 置 ， 文 件 名 为 “综合 示例 一 一 购物 简易 计算 
器 .html”。 
to3j 在 HTML 文档 的 body 部 分 增加 表格 及 内 容 ， 代 码 如 下 : 


8 在 HTML 文档 的 head 部 分 ， 增 加 CSS 样式 ， 为 表格 增加 边框 及 相应 的 修饰 ， 代 码 
如 下 : 


t@g 保存 网 页 后 ， 即 可 查看 最 终 效果 。 
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使 用 HTML 5 创建 表格 第 7 章 


7.5 问题 解答 


1. 在 Dreamweaver CS5.5 中 如 何 选择 多 个 单元 格 ? 

在 Dreamweaver CS5.5 中 选择 单元 格 的 操作 类 似 于 文字 处 理工 具 Word， 按 下 鼠标 左 键 拖 
动 鼠 标 ， 经 过 的 单元 格 都 会 被 选择 。 按 下 Ctrl 键 ， 单 击 某 个 单元 格 ， 该 单元 格 将 会 被 选择 ， 
这 些 单元 格 可 以 是 连续 的 也 可 以 是 不 连续 的 。 在 需要 选择 区 域 的 开头 单元 格 中 单 击 , 按 下 Shift 
键 ， 在 区 域 的 末尾 单元 格 中 单 击 ， 开 头 和 结尾 单元 格 组 成 的 区 域内 的 所 有 单元 格 将 会 被 选择 。 

2. 表格 除了 显示 数据 ， 还 可 以 进行 布局 ， 为 何不 使 用 表格 进行 布局 ? 

在 互联 网 刚刚 开始 普及 时 ， 网 页 非常 简单 ， 形 式 也 非常 单调 ， 当 时 美国 设计 David Siegel 
发 明了 表格 布局 ， 并 风靡 全 球 。 在 表格 布局 的 页 面 中 ， 表 格 不 但 需要 显示 内 容 ， 还 要 控制 页 面 
的 外 观 及 显示 位 置 ， 导 致 页 面 代 码 过 多 ， 结 构 与 内 容 无 法 分 离 , 给 网 站 的 后 期 维护 和 很 多 其 他 
方面 带 来 了 麻烦 。 

3. 使 用 <thead>、<tbody> 和 <tfoot> 标 记 对 行进 行 分 组 的 意义 何在 ? 

在 HTML 文档 中 增加 <thead>、<tbody> 和 <tfoof> 标 记 虽 然 从 外 观 上 不 能 看 出 任何 变化 ， 
但 是 它们 却 使 文档 的 结构 更 加 清晰 。 使 用 <thead>、<tbody> 和 <tfoof> 标 记 除 了 使 文档 更 加 清晰 
之 外 ， 还 有 一 个 更 重要 的 意义 ， 方 便 使 用 CSS 样式 对 表格 的 各 个 部 分 进行 修饰 ， 从 而 可 制作 
出 更 出 色 的 表格 。 
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在 网 页 中 ， 表 单 的 作用 比较 重要 ， 主 要 负责 采集 浏览 者 的 相关 数据 。 例 如 常见 的 注册 表 、 
调查 表 和 留言 表 等 。 在 HTML 5 中 ， 表 单 拥有 多 个 新 的 表单 输入 类 型 ， 这 些 新 特性 提供 了 更 
好 的 输入 控制 和 验证 。 


8.1 表单 概述 


表单 主要 用 于 收集 网 页 上 浏览 者 的 相关 信息 。 其 标签 为 <form></form>。 表 单 的 基本 语法 
格式 如 下 : 


<form action="url" method="getlpost" enctype="mine"> 


</form> 


其 中 ，action="url" 指定 处 理 提交 表单 的 格式 ， 可 以 是 URL 地 址 或 电子 邮件 地 址 。 
method="get/post" 指 明 提交 表单 的 HITP 方法 。enctype=mine 指明 用 来 把 表单 提交 给 服务 器 时 
的 互联 网 媒体 形式 。 

表单 是 一 个 能 够 包含 表单 元 素 的 区 域 。 通 过 添加 不 同 的 表单 元 素 ， 将 显示 不 同 的 效果 。 

【 例 8.1】〔 实 例文 件 ，ch08\8.1.html) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

下 面 是 输入 用 户 登录 信息 

<br 

用 户 名 称 

<input type="text" name="user"> 
<br> 

用 户 密码 

<input type="password" name="password"> 
<br> 

<input type="submit" value=" 登 录 "> 
</form> 


</body> 
</html> 
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在 正 9.0 中 浏览 效果 如 图 8-1 所 示 ， 可 以 看 到 用 户 登录 信息 页 面 。 
| 

人 S 局] 代 三 vchog\slLhtm P ~- OX||@E 

编 潮 (E) 。 童 看 (V) ”收藏 夫 (A) 工具 (人 


下 面 是 输入 用 户 登录 信息 
用 户 名 称 


用 户 密码 
到 


图 8-1 用 户 登录 窗口 
8.2 ”表单 基本 元 素 的 使 用 


表单 元 素 是 能 够 让 用 户 在 表单 中 输入 信息 的 元 素 。 常 见 的 有 文本 框 、 密 码 框 、 下 拉 菜 单 、 
单 选 框 和 复 选 框 等 。 
8.2.1 单行 文本 输入 框 

文本 框 是 一 种 让 访问 者 自己 输入 内 容 的 表单 对 象 ， 通 常 被 用 来 填写 单个 字 或 者 简短 的 回 
答 ， 例 如 用 户 姓 名 和 地 址 等 。 代 码 格式 如 下 : 

<input type="text" name="..." size="..." maxl ="..." value="..."> 

其 中 ，type="text" 定 义 单行 文本 输入 框 ，name 属性 定义 文本 框 的 名 称 ， 要 保证 数据 的 准 
确 采 集 ， 必 须 定义 一 个 独一无二 的 名 称 ; size 属性 定义 文本 框 的 宽度 ， 单 位 是 单个 字符 宽度 ; 
maxlength 属性 定义 最 多 输入 的 字符 数 ，value 属性 定义 文本 框 的 初始 值 。 

【 例 8.2】〔 实 例文 件 ，ch08\8.2.html) 


<!IDOCTY?PE html> 

<html> 

<head><title> 输 入 用 户 的 姓名 </title></head> 

<body> 

<form> 

请 输入 您 的 姓名 : 

<input type="text" name="yourname" size="20" maxlength="15"> 
请 输入 您 的 地 址 : 

<input type="text" name="youradr" size="20" maxlength="15"> 


< 
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</form> 


</body> 
</html> 


在 正 9.0 中 的 浏览 效果 如 图 8-2 所 示 ， 可 以 看 到 两 个 单行 文本 输入 框 。 


eS 全 ta\chos\s2.htm| P - 0 x | EE 
文件 (F) ”六 辑 (E) 。 豆 看 (V) ”收藏 夫 (A) 工具 TT) 


请 输入 您 的 姓名 ， 
请 输入 您 的 地 址 ， 


图 8-2 单行 文本 输入 框 
8.2.2 多 行文 本 输入 框 
多 行 输入 框 〈textarea) 主要 用 于 输入 较 长 的 文本 信息 。 代 码 格式 如 下 ; 
<textarea name="..." cols="..." roWs="..." wrap="..."></textarea > 


其 中 ，name 属性 定义 多 行文 本 框 的 名 称 ， 要 保证 数据 的 准确 采集 ， 必 须 定 义 一 个 独 一 无 
二 的 名 称 ; cols 属性 定义 多 行文 本 框 的 宽度 ， 单 位 是 单个 字符 宽度 ;rows 属性 定义 多 行文 本 
框 的 高 度 ， 单 位 是 单个 字符 宽度 ，wrap 属性 定义 输入 内 容 大 于 文本 域 时 的 显示 方式 。 

【 例 8.3】“《 实 例文 件 : ch08\8.3.html) 


<!DOCTYPE html> 

<html> 

<head><title> 多 行文 本 输入 </title></head> 
<body> 

<form> 

请 输入 您 最 新 的 工作 情况 <br> 

<textarea name="yourworks" cols ="50" rows = "5"></textarea> 
<br> 

<input type="submit" value=" 提 交 "> 
</form> 

</body> 

</html> 


在 正 9.0 中 的 浏览 效果 如 图 8-3 所 示 ， 可 以 看 到 多 行文 本 输入 框 。 
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。 于 回国 
Se 全 代 到 \cho8\8.3.html ”0 X | 钨 多 行文 本 给 入 
文件 日 ”六 名 (E) ”可 看 (V) 收藏 夫 (A) ”工具 (T) 帮助 (H) 


请 输入 您 最 新 的 工作 情况 


图 8-3 多 行文 本 输入 框 
8.2.3 ”密码 域 


密码 输入 框 是 一 种 特殊 的 文本 域 , 主要 用 于 输入 保密 信息 。 当 网 页 浏览 者 输入 文本 时 ， 显 
示 的 是 黑 点 或 者 其 他 符号 ， 这 样 就 增加 了 输入 文本 的 安全 性 。 代 码 格式 如 下 : 


<input type="password" name="..." size="..." > 


其 中 type="password" 定 义 密码 框 ，name 属性 定义 密码 框 的 名 称 ， 要 保证 唯一 性 ，size 属 
性 定义 密码 框 的 宽度 ， 单 位 是 单个 字符 宽度 maxlength 属性 定义 最 多 输入 的 字符 数 。 
【 例 8.4】〔 实 例文 件 ，ch08\8.4.html) 


<!DOCTYPE html> 

<html> 
<head><title> 输 入 用 户 姓 名 和 密码 </title></head> 
<body> 

<form> 

用 户 姓名 : 

<input type="text" name="yourname"> 

<br> 

登录 密码 : 

<input type="password" name="yourpw"><br> 
</form> 


</body> 
</html> 


在 正 9.0 中 的 浏览 效果 如 图 8-4 所 示 , 输 入 用 户 名 和 密码 时 可 以 看 到 密码 以 黑 点 形式 显示 。 
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ES 各 代 到 \ch08\8.4.html 人 ~ 0 X | 低 给 入 用 六 姓名 和 去 玛 
文件 (F) ”篇 疆 (E) ”得 乔 (V) ”收藏 夫 (A) ”工具 (T) 帮助 (H) 


用 户 姓 名 ， 7 
登录 密码 ， eeeeee 


图 8-4 密码 输入 框 
8.2.4 ” 单 选 按钮 
单 选 按钮 主要 是 控制 网 页 浏览 者 在 一 组 选项 里 只 能 选择 一 个 选项 。 代 码 格式 如 下 : 
<input type="radio" name=" " value =" "> 


其 中 type="radio" 定 义 单 选 按钮 ; name 属性 定义 单 选 按钮 的 名 称 ， 单 选 按钮 都 是 以 组 为 单 
位 使 用 的 ， 在 同一 组 中 的 单 选项 都 必须 用 同一 个 名 称 ; value 属性 定义 单 选 按钮 的 值 ， 在 同一 
组 中 ， 它 们 的 域 值 必须 是 不 同 的 。 

【 例 8.5】 (实例 文件 ，ch08\8.5.html) 


<!DOCTYPE html> 
<html> 
<head><title> 选 择 感 兴趣 的 图 书 </title></head> 
<body> 


<form> 

请 选择 您 感 兴趣 的 图 书 类 型 : 

<br> 

<input type="radio" name="book" value = "Book1"> 网 站 编程 <br> 
<input type="radio" name="book" value = "Book2"> 办 公 软 件 <br> 
<input type="radio" name="book" value = "Book3"> 设 计 软 件 <br> 
<input type="radio" name="book" value = "Book4"> 网 络 管理 <br> 
<input type="radio" name="book" value = "Book5"> 黑 客 攻防 <br> 
</form> 


</body> 
</html> 
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在 正 9.0 中 的 浏览 效果 如 图 8-5 所 示 ， 即 可 看 到 5 个 单 选 按钮 ， 用 户 只 能 选择 其 中 一 个 单 
选 按钮 。 


FR a 
Sl 公 代码 \ch08\8.5.html 人 ”0 X | 疙 运 反感 兴 十 的 图 书 
文件 (有 ”六 铝 (E) ”可 看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 


请 选择 您 感 兴趣 的 图 书 类 型 
网 站 编程 
3 办 公 软 件 
名 设计 软件 
) 网 络 管理 
9 黑客 攻防 


图 8-5 单 选 按钮 
8.2.5” 复 选 框 


复 选 框 主要 是 让 网 页 浏览 者 在 一 组 选项 里 可 以 同时 选择 多 个 选项 ,每 个 复 选 框 都 是 一 个 独 
立 的 元 素 ， 都 必须 有 一 个 唯一 的 名 称 。 代 码 格 式 如 下 : 


<input type="checkbox" name=" " value =""> 


其 中 type="checkbox" 定 义 复 选 框 ，name 属性 定义 复 选 框 的 名 称 ， 在 同一 组 中 的 复 选 框 都 
必须 用 同一 个 名 称 ; value 属性 定义 复 选 框 的 值 。 
【 例 8.6】〔 实 例文 件 ，ch08\8.6.html) 


<!DOCTYPE html> 

<html> 

<head><title> 选 择 感 兴趣 的 图 书 </title></head> 

<body> 

<form> 

请 选择 您 感 兴趣 的 图 书 类 型 : <br> 

<input type="checkbox" name="book'" value = "Bookl"> 网 站 编程 <br> 
<input type="checkbox" name="book'" value = "Book2"> 办 公 软 件 <br> 
<input type="checkbox" name="book" value = "Book3"> 设 计 软件 <br> 
<input type="checkbox" name="book'" value = "Book4"> 网 络 管理 <br> 
<input type="checkbox" name="book" value = "Book5" checked> 黑 客 攻 防 <br> 
</form> 

Sbody> 

</html> 


精通 HTM 5 网 页 设计 


checked 属性 主要 用 来 设置 默认 选中 选项 。 
提 示 
在 正 9.0 中 的 浏览 效果 如 图 8-6 所 示 ， 可 看 到 有 5 个 复 选 框 ， 其 中 “黑客 攻防 ” 复 选 框 默 
认 被 选中 。 


本 Pe 
(DY 人 chos\e Shtml P - 0 x | § ms 


文件 (F) ”六 强 (E) 。 豆 看 (V) 收藏 天 (A) ”工具 (T) 帮助 (H) 


请 选择 您 感 兴趣 的 图 书 类 型 ， 
加 网 站 编程 
加 办公 软件 
回 设计 软件 


回 网 络 管理 
国 黑 客 攻 防 


图 8-6 ” 复 选 框 的 效果 
8.2.6 下拉 选 择 框 


下 拉 选 择 框 主 要 用 于 在 有 限 的 空间 里 设置 多 个 选项 。 下 拉 选 择 框 既 可 以 用 做 单 选 , 也 可 以 
用 做 复 选 。 代 码 格式 如 下 : 


<select name="..." size="..." multiple> 
‘<option value="..." selected> 


i 

ns 

其 中 size 属性 定义 下 拉 选 择 框 的 行 数 ，name 属性 定义 下 拉 选 择 框 的 名 称 ，multiple 属性 
表示 可 以 多 选 ， 如 果 不 设置 本 属性 ， 那 么 只 能 单 选 ，value 属性 定义 选择 项 的 值 ，selected 属性 


表示 默认 已 经 选择 本 选项 。 
【 例 8.7】“《 实 例文 件 : ch08\8.7.html) 


<!DOCTYPE html> 

<html> 

<head><title> 选 择 感 兴趣 的 图 书 </title></head> 
<body> 


<form> 
请 选择 您 感 兴趣 的 图 书 类 型 : <br> 
<select name="fruit" size = "3" multiple> 
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<option value="Bookl"> 网 站 编程 
<option value="Book2"> 办 公 软 件 
<option value="Book3"> 设 计 软件 
<option value="Book4"> 网 络 管理 
<option value="Book5"> 黑 客 攻 防 
</select> 

</form> 


</body> 
</html> 


在 正 9.0 中 的 浏览 效果 如 图 8-7 所 示 ， 即 可 看 到 下 拉 选 择 框 ， 其 中 显示 为 三 行 选项 ， 用 户 
可 以 按 住 Ctrl 键 ， 选 择 多 个 选项 。 


于 
ED raha P - ox | ume-enns 


文件 (六 声 (E) 。 章 看 (V) ”收藏 闪 (A) 工具 (T) 帮助 (H) 


请 选择 您 感 兴趣 的 图 书 类 型 ， 
网 站 编程 。 


及 计 软 件 ~ 


图 8-7 下拉 选 择 框 的 效果 


8.2.7 ”普通 按钮 
普通 按钮 用 来 控制 其 他 定义 了 处 理 脚 本 的 处 理工 作 。 代 码 格式 如 下 : 
<input type="button" name="..." value="..." onClick="..."> 


其 中 type="button" 定 义 普通 按钮 ， name 属性 定义 普通 按钮 的 名 称 ; value 属性 定义 按钮 的 
显示 文字 ; onClick 属性 表示 单 击 行为 ， 也 可 以 是 其 他 的 事件 ， 通 过 指定 脚本 函数 来 定义 按钮 
的 行为 。 

【 例 8.8】 实 例文 件 ，ch08\8.8.html) 


<!IDOCTYPE html> 

<html> 

<body> 

<form> 

单 击 下 面 的 按钮 ， 把 文本 框 1 的 内 容 找 贝 到 文本 框 2 中 : 
<br> 
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文本 框 1:<input type="text" id="field1" value=" 学 习 HTML 5 的 技巧 "> 

<br/> 

文本 框 2:<input type="text" id="field2"> 

<br> 

<input type="button” name="..."” value=" 单 击 我 ”onClick="document.getElementById('field2").value= 
document.getElementById('field1").value"> 

</form> 


</body> 
</html> 


在 下 9.0 中 的 浏览 效果 如 图 8-8 所 示 ， 单 击 “ 单 击 我 ”按钮 ， 即 可 实现 将 文本 框 中 内 容 复 
制 到 文本 框 2 中 。 


Eslees|E 
4 ,FF 
个人 S| C\Users\yingda\C PD OX|d 


文件 (有 ”编辑 (E) ”前 看 (V) ”收藏 夫 (A) 工具 (TT ” 


单 击 下 面 的 按钮 ， lL 文本 框 1 的 内 


容 拷贝 到 文本 杠 
文本 框 1 : 学 习 HTIL5 的 技巧 
文本 框 2: 学 习 HTIL5 的 技巧 


图 8-8 单 击 按钮 后 的 复制 效果 
8.2.8 提交 按钮 
提交 按钮 用 来 将 输入 的 信息 提交 到 服务 器 。 代 码 格式 如 下 : 
<input type="submit" name="..." value="..."> 


其 中 type="submit" 定 义 提交 按钮 ; name 属性 定义 提交 按钮 的 名 称 ; value 属性 定义 按钮 的 
显示 文字 。 通 过 提交 按钮 可 以 将 表单 里 的 信息 提交 给 表单 中 action 所 指向 的 文件 。 
【 例 8.9】〔 实 例文 件 ，ch08\8.9.html) 


<!DOCTYPE html> 

<html> 

<head><title> 输 入 用 户 名 信息 </tile></head> 

<body> 

<form action="http://www.yinhangit.com/yonghu.asp" method="get"> 
请 输入 你 的 姓名 : 
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<input type="text" name="yourname"> 
<br> 

请 输入 你 的 住址 : 

<input type="text" name="youradr"> 
<br> 

请 输入 你 的 单位 : 

<input type="text" name="yourcom"> 
<br> 

请 输入 你 的 联系 方式 : 

<input type="text" name="yourcom"> 
<br> 

<input type="submit" value=" 提 交 "> 
</form> 

</body> 

</html> 


在 正 9.0 中 的 浏览 效果 如 图 8-9 所 示 ， 输 入 内 容 后 单 击 “ 提 交 ” 按 钮 ， 即 可 实现 将 表单 中 
的 数据 发 送 到 制定 的 文件 。 


(i 


[Ee 
IO 各] CNUsersyingda\c 只 7X 多 生 入 用 户 名 人 
文件 (月 ”编辑 (E) ， 坦 看 (V) ”收藏 夫 (A) ”工具 (T) ”帮助 (H) 


请 输入 你 的 姓名 ， | 
请 输入 你 的 住址 ， 

请 输入 你 的 单位 ， 

请 输入 你 的 联系 方式 ， 


图 8-9 提交 按钮 
8.2.9 重 置 按钮 
重 置 按钮 用 来 重 置 表单 中 输入 的 信息 。 代 码 格式 如 下 : 


<input type="reset" name="..." value="..."> 


其 中 type="reset" 定 义 复位 按钮 ，name 属性 定义 复位 按钮 的 名 称 ; value 属性 定义 按钮 的 
显示 文字 。 
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【 例 8.10】 《实例 文件 :ch08\8.10.html) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

请 输入 用 户 名 称 : 

<input type='text> 

<br> 

请 输入 用 户 密码 : 

<input type='password> 

<br> 

<input type="submit" value=" 登 录 "> 
<input type="reset" value=" 重 置 "> 
</form> 

</body> 

</html> 


在 正 9.0 中 的 浏览 效果 如 图 8-10 所 示 ， 输 入 内 容 后 单 击 “ 重 置 ”按钮 ， 即 可 实现 将 表单 
中 的 数据 清空 的 目的 。 
Esse 
7 
公信 会] CNUsersyingda\C 只 ~ 


文件 (月 ”编辑 (E) ”前 看 (V) ”收藏 夫 ( ” 


请 输入 用 户 名 称 : 


| 
请 输入 用 户 密码 : 
E33 


图 8-10 “ 重 置 ”按钮 
8.3 ”表单 高 级 元 素 的 使 用 


除了 上 述 基 本 元 素 外 ，HTML 5 中 还 有 一 些 高 级 元 素 。 包 括 URL、email、time、range、 
search 等 等 。 对 于 这 些 高 级 属性 , I 下 9.0 浏览 器 暂时 还 不 支持 ， 下 面 将 用 Opera 11.60 浏览 器 查 
看 效果 。 
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8.3.1 url 属 性 


url 属性 用 于 说 明 网 站 网 址 的 ,显示 为 一 个 文本 字段 , 用 于 输入 URL 地 址 。 在 提交 表单 时 ， 
会 自动 验证 url 的 值 。 代 码 格式 如 下 : 


<input type="url" name="userurl"/> 


另外 ， 用 户 可 以 使 用 普通 属性 设置 url 输入 框 ， 例 如 可 以 使 用 max 属性 设置 其 最 大 值 、 
min 属性 设置 其 最 小 值 、step 属性 设置 合法 的 数字 间隔 、 利 用 value 属性 规定 其 默认 值 。 对 于 
另外 的 高 级 属性 中 同样 的 设置 不 再 重复 讲述 。 

【 例 8.11】 “实例 文件 ，ch08\8.11.html) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

<br/> 

请 输入 网 址 : 

<input type="url" name="userurl"/> 
</form> 

</body> 

</html> 


在 Opera 11.60 中 的 浏览 效果 如 图 8-11 所 示 ， 用 户 可 输入 相应 的 网 址 。 


,file://localho... x | 本 
4 了 个 9 


请 输入 网 直 
| | 


图 8-11 url 属 性 的 效果 
8.3.2 email 属 性 
与 url 属性 类 似 ，email 属性 用 于 输入 e-mail 地 址 。 在 提交 表单 时 ， 会 自动 验证 email 域 
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的 值 。 代 码 格式 如 下 : 
<input type="email" name= "user email"/> 
【 例 8.12】〔 实 例文 件 : ch08\8.12.html) 


<!IDOCTY?PE html> 

<html> 

<body> 

<form> 

<br> 

请 输入 您 的 邮箱 地 址 : 

<input type="email" name="user email"/> 
<br> 

<input type="submit" value=" 提 交 "> 
</form> 

</body> 

</html> 


在 Opera 11.60 中 的 浏览 效果 如 图 8-12 所 示 ， 用 户 可 输入 相应 的 邮箱 地 址 。 如 果 用 户 输入 
的 邮箱 地 址 不 合法 ， 单 击 “ 提 交 ” 按 钮 后 会 弹出 图 8-12 中 的 提示 信息 。 
E=slEes| 臣 到 
Wfile://localhost/C:/Us... x | 下 面 ， 


让 有 全 9- | 加 本 地 |localho 广 | 


请 输入 您 的 邮箱 地 址 ， | 


请 输入 一 个 有 效 的 电子 邮件 地 址 


图 8-12 ”eamil 属性 的 效果 
8.3.3 date 和 time 


在 HTML 5 中 , 新 增 了 日 期 和 时 间 输 入 类 型 ， 包 括 date、datetime、datetime-local、month、 
week 和 time。 它 们 的 具体 含义 如 下 表 所 示 。 
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date 选取 日 、 月 、 年 

month 选取 月 、 年 

week 选取 周 和 年 

time 选取 时 间 

datetime 选取 时 间 、 日 、 月 、 年 
datetime-local 选取 时 间 、 日 、 月 、 年 (本 地 时 间 )》 


上 述 属 性 的 代码 格式 类 似 ， 例 如 以 date 属性 为 例 ， 代 码 格 式 如 下 : 
<input type="date" name="user date" /> 


【 例 8.13】〔 实 例文 件 ， ch08\8.13.html) 


<!DOCTYPE html> 
<html> 

<body> 

<form> 

<br/> 

请 选择 购买 商品 的 日 期 : 
<br> 

<input type="date" name="user_date" /> 
</form> 

</body> 

</html> 


在 Opera 11.6 中 的 浏览 效果 如 图 8-13 所 示 ， 用 户 单 击 输入 框 中 的 向 下 按钮 ， 即 可 在 弹出 
的 窗口 中 选择 需要 的 日 期 。 


[a Opera 
隔 filey/localhosycyus… x | 而 | 
DD oo 


加 本 地 | localho 高 


请 选择 购买 商品 的 日 期 : 


图 8-13 date 属性 的 效果 
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8.3.4 number 属性 


number 属性 提供 了 一 个 输入 数字 的 输入 类 型 。 用 户 可 以 直接 输入 数字 或 者 通过 单 击 微调 
框 中 的 向 上 或 者 向 下 按钮 选择 数字 。 代 码 格式 如 下 : 


<input type="number" name="shuzi" /> 
【 例 8.14】 《实例 文件 ，ch08\8.14html) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

<br> 

此 网 站 我 曾经 来 

<input type="number" name="shuzi "人 > 次 了 哦 ! 
</form> 

</body> 

</html> 


在 Opera 11.6 中 的 浏览 效果 如 图 8-14 所 示 ， 用 户 可 以 直接 输入 数字 ， 也 可 以 单 击 微调 按 
钮 选择 合适 的 数字 。 


| 加 fleWlocalhosycyus- x 号 [wl 


研 户 有 全 or | 加 本 地 | localho 友 | 


此 网 站 我 曾经 来 结交 了 哦 | 


图 8-14 number 属性 的 效果 


0@! 强烈 建议 用 户 使 用 min 和 max 属性 规定 输入 的 最 小 值 和 最 大 值 。 
提 示 


0 
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8.3.5 ”range 属性 


range 属性 用 来 显示 滚动 的 控件 。 和 number 属性 一 样 ， 用 户 可 以 使 用 max、min 和 step 
属性 控制 控件 的 范围 。 代 码 格式 如 下 : 


<input type="range" name="" min="" max="" /> 


其 中 min 和 max 分 别 控制 滚动 控件 的 最 小 值 和 最 大 值 。 
【 例 8.15】 【实例 文件 ，ch08\8.15.html) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

<br> 

英语 成 绩 公 布 了 ! 我 的 成 绩 名 名 次 为 : 

<input type="range" name="ran" min="1" max="10" /> 
</form> 


</body> 
</html> 


在 Opera 11.6 中 的 浏览 效果 如 图 8-15 所 示 ， 用 户 可 以 拖 忠 滑 块 ， 从 而 选择 合适 的 数字 。 


a 
Ope 本 
| filey/oc. x | BW file/loc.. x 中 癌 


4 字 癌 or | 间 本 地 |Iocalho 廊 | 


英语 成 绩 公 


入 


了 ! 我 的 成 绩 名 名 次 为 : 


图 8-15 ”range 属性 的 效果 


【六 默认 情况 下 ， 滑 块 位 于 滚珠 的 中 间 位 置 。 如 果 用 户 指 定 的 最 大 值 小 于 最 小 值 ， 则 
提示 允许 使 用 反 向 滚动 轴 ， 目 前 浏览 器 对 这 一 属性 还 不 能 很 好 地 支持 。 
有 
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8.3.6 required 属性 


required 属性 规定 必须 在 提交 之 前 填写 输入 域 〈 不 能 为 空 ) 。required 属性 适用 于 以 下 类 
型 的 输入 属性 : text、search、url、email、password、date、pickers、number、checkbox 和 radio 
等 

【 例 8.16】〔 实 例文 件 ，ch08\8.16.html) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

下 面 是 输入 用 户 登录 信息 

<br> 

用 户 名 称 

<input type="text" name="user" required="required"> 
<br> 

用 户 密码 

<input type="password" name="password" required="required"> 
<br> 

<input type="submit" value=" 登 录 "> 

</form> 


</html> 


在 Opera 11.6 中 的 浏览 效果 如 图 8-16 所 示 ， 用 户 如 果 只 是 输入 密码 ， 然 后 单 击 “ 登 录 ” 
按钮 ， 将 弹出 提醒 信息 。 


[EPE 区 呈 
Wfile://localhost/C:/Us... x | 而 | 
车 字 全 or | 加 本 地 |Iocalho 广 | 


人 怎 量 … 回 仅 为 | | 保存 | 从 不 x 完 同 
下 面 是 输入 用 户 登 录 信 息 
用 户 千林 1 


图 8-16 required 属性 的 效果 
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8.4 综合 实例 一 一 创建 用 户 反馈 表单 


在 本 实例 中 ， 将 使 用 表单 内 的 各 种 元 素来 开发 一 个 简单 网 站 的 用 户 意 见 反馈 页 面 。 

反馈 表单 非常 简单 , 通常 包含 三 个 部 分 , 需要 在 页 面 上 方 给 出 标题 , 标题 下 方 是 正文 部 分 ， 
即 表 单元 素 ， 最 下 方 是 表单 元 素 提 交 按 钮 。 在 设计 这 个 页 面 时 ， 需 要 把 “用 户 注册 ”标题 设置 
成 Hl 大 小 ， 正 文 使 用 p 来 限制 表单 元 素 。 

具体 操作 步骤 如 下 : 

构建 HIML 页 面 ， 实 现 表单 内 容 : 


<!IDOCTYPE html> 


<html> 

<head> 

<title> 用 户 反馈 页 面 </title> 

</head> 

<body> 

<hl align=center> 用 户 反 馈 表单 </h1> 

<form method="post" > 

<p> 姓 &nbsp:&nbsp:&nbsp:&nbsp: 名 : 

<input type="text" class=txt size="12" maxlength="20" name="username" /> 
</p><p> 性 &nbsp;&nbsp;&nbsp;&nbsp: 别 : 

<input type="radio" value="male" /> 男 

<input type="radio" value="female" /> 女 

</p><p> 年 &nbsp:&nbsp:&nbsp:&nbsp: 龄 : 

<input type="text" class=txt name="age" /> 

</p> 

<p> 联 系 电话 : 

<input type="text" class=txt name="tel" /> 
</p><p> 电 子 邮 件 : 

<input type="text" class=txt name="email" /> 
</p><p> 联 系 地 址 : 

<input type="text" class=txt name="address" /> 
</p> 

<p> 

请 输入 您 对 网 站 的 建议 <br> 

<textarea name="yourworks" cols ="50" rows = "5"></textarea> 
<br> 

<input type="submit" name="submit" value=" 提 交 "/> 
<input type="reset" name="reset" value= "清除 " /> 
</p> 


</form> 
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</body> 
</html> 


在 正 9.0 中 的 浏览 效果 如 图 8-17 所 示 ， 可 以 看 到 创建 了 一 个 用 户 反 馈 表 单 ， 包 含 一 个 标 
题 “ 用 户 反馈 表单 ”及 “姓名 ”、“ 性 别 ”、“ 年 龄 ”、“ 联 系 电话 ”、“ 电 子 邮 件 ”、“ 联 
系 地 址 ”、“ 请 输入 您 对 网 站 的 建议 ”等 输入 框 和 “提交 ”按钮 。 
| 


自 cAUsersyingda\c PD - © xX | @ RE x| 
文件 (月 入 竹 6) 得 看 (V) 收藏 夫 (A】 工具 (T) 二 助 (H) 


用 户 反馈 表单 


姓 名 ， 
性 ” 别 ，e@ 男 @ 女 
年 扒 ， 
联系 电话 ， 
电子 邮件 ， 
联系 地 址 ， 
请 输入 您 对 网 站 的 建议 


加 的 


图 8-17 用 户 反馈 页 面 
8.5 问题 解答 


1. 如 何在 表单 中 实现 文件 上 传 文本 框 ? 

在 HIML 5 语言 中 ， 使 用 file 属性 实现 文件 上 传 文本 框 。 语 法 格式 为 : <input type="file" 
name="..." size=" " maxlength=" ">。 其 中 type="file" 定 义 为 文件 上 传 框 ，name 属性 为 文件 上 传 
文本 框 的 名 称 ，size 属性 定义 文件 上 传 文本 框 的 宽度 ， 单 位 是 单个 字符 宽度 ，maxlength 属性 
定义 最 多 输入 的 字符 数 ， 文 件 上 传 框 的 显示 效果 如 图 8-18 所 示 。 


如] CNUsersyingda\c PD - © X | @ cNusersyingdi 
文件 (有 ” 编 名 (EF) 。 坦 看 (V) ”收藏 夫 (A) 工具 (T) 帮助 (H) 


8-18 ”文件 上 传 框 


“164。 
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2. 制作 的 单 选 框 为 什么 可 以 同时 选中 多 个 ? 
此 时 用 户 需 要 检查 单 选 框 的 名 称 , 保证 同一 组 中 的 单 选 框 名 称 必须 相同 , 这 样 才能 保证 单 
选 框 只 能 选中 一 个 。 
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HTML 5 呈现 了 很 多 的 新 特性 ， 这 在 之 前 的 HTML 中 是 不 可 见 到 的 。 其 中 一 个 最 值得 提 
及 的 特性 就 是 HTML Canvas， 可 以 对 2D 或 位 图 进行 动态 、 脚 本 的 泻 染 。Canvas 是 一 个 矩形 
区 域 ， 使 用 JavaScript 可 以 控制 其 每 一 个 像素 。 


9.1 canvas 概述 


canvas 是 一 个 新 的 HTML 元 素 ， 这 个 元 素 可 以 被 Script 语言 (通常 是 JavaScript) 用 来 绘 
制图 形 。 例 如 可 以 用 它 来 画图 、 合 成 图 像 、 或 做 简单 的 动画 。 


9.1.1 添加 canvas 元 素 


canvas 标签 是 一 个 矩形 区 域 , 它 包 含 两 个 属性 width 和 height, 分 别 表示 和 矩形 区 域 的 宽度 和 高 
度 ， 这 两 个 属性 都 是 可 选 的 ， 并 且 都 可 以 通过 CSS 来 定义 ， 其 默认 值 是 300 像素 和 150 像素 。 


<canvas id="myCanvas" width="300" height="200" style="border: 1px solid #c3c3c3;"> 
Your browser does not support the canvas element. 
</canvas> 


上 面 示例 代码 中 ，id 表示 画布 对 象 名 称 ，width 和 height 分 别 表示 宽度 和 高 度 ， 最 初 的 画 
布 是 不 可 见 的， 为 了 观察 这 个 矩形 区 域 ， 这 里 使 用 了 CSS 样式 ， 即 style 标记 。style 表示 画布 
的 样式 。 如 果 浏 览 器 不 支持 画布 标记 ， 会 显示 画布 中 间 的 提示 信息 。 

画布 canvas 本 身 不 具有 绘制 图 形 的 功能 , 只 是 一 个 容器 , 如 果 读 者 对 Java 语言 非常 了 解 ， 
就 会 发 现 HTML 5 的 画布 和 Java 中 的 Panel 面板 非常 相似 ， 都 可 以 在 容器 内 绘制 图 形 。 既 然 
放 好 了 canvas 画布 元 素 ， 就 可 以 使 用 脚本 语言 JavaScript 在 网 页 上 绘制 图 像 了 。 

使 用 canvas 结合 JavaScript 绘制 图 形 ， 一 般 情况 下 需要 下 面 几 个 步骤 ; 


to 册 JavaScript 使 用 这 来 寻找 canvas 元 素 ， 即 可 获取 当前 画布 对 象 ， 其 代码 如 下 : 


Var c=document.getElementById("myCanvas"): 
02 创建 context 对 象 ， 其 代码 如 下 : 
Var cxt=c.getContext("2d"); 


getContext 方法 返回 一 个 指定 contextId 的 上 下 文 对 象 ， 如 果 指 定 的 id 不 被 支持 ， 则 返回 
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null， 当 前 唯一 被 强制 必须 支持 的 是 24， 也 许 在 将 来 会 有 3d， 注 意 ， 指 定 的 id 是 大 小 写 敏感 
的 。 对象 cxt 建立 之 后 ， 就 可 以 拥有 多 种 绘制 路 径 、 矩 形 、 圆 形 、 字 符 以 及 添加 图 像 的 方法 .。 
.03j 绘制 图 形 : 


cxt.fillStyle="#FF0000"; 
cxt.fillRect(0,0,150,75); 


fillStyle 方法 将 其 染 成 红色 ，filIRect 方法 规定 了 形状 、 位 置 和 尺寸 。 这 两 行 代码 将 绘制 
一 个 红色 的 矩形 。 


9.1.2 ”绘制 矩形 


单独 的 一 个 canvas 标记 只 是 在 页 面 中 定义 了 一 块 矩形 区 域 ， 并 无 特别 之 处 ， 开 发 人 员 只 
有 配合 使 用 JavaScript 脚本 ， 才 能 够 完成 各 种 图 形 ， 线 条 ， 以 及 复杂 的 图 形变 换 操 作 ， 与 基于 
SVG 来 实现 同样 绘图 效果 比较 , canvas 绘图 是 一 种 像素 级 别 的 位 图 绘图 技术 , 而 SVG 则 是 一 
种 矢量 绘图 技术 。 

使 用 canvas 和 JavaScript 绘制 一 个 矩形 , 可 能 会 涉及 到 一 个 或 多 个 方法 , 这 些 方 法 如 下 表 
所 示 。 


绘制 一 个 矩形 ， 这 个 矩形 区 域 没有 边框 ， 只 有 填充 色 。 这 个 方法 有 4 个 参数 ， 前 两 个 


fillRect _ _ ea 
表示 左上 角 的 坐标 位 置 ， 第 三 个 参数 为 长 度 ， 第 四 个 参数 为 高 度 


清除 一 个 矩形 区 域 ， 被 清除 的 区 域 将 没有 任何 线条 。 该 方法 的 4 个 参数 的 解释 同 
fillRect 方法 。 


clearRect 


绘制 一 个 带 边 框 的 矩形 。 该 方法 的 4 个 参数 的 解释 同 fillRect 方法 。 


【 例 9.1】 (实例 文件 :ch09\9.1.html) 


<!DOCTYPE html> 

<html> 

<body> 

<canvas id="myCanvas" width="300" height="200" style="border: 1px solid blue"> 
Your browser does not support the canvas element. 
</canvas> 

<script type="text/JavaScript"> 

Var c=document.getElementById("myCanvas"): 
Var cxt=c.getContext("2d"); 
cxt.fillStyle="rgb(0,0,200)"; 
cxt.fillRect(10,20,100,100): 

</script> 

</body> 

</html> 


精通 HTM 5 网 页 设计 


上 面 代码 中 ， 首 先 定义 画布 对 象 ， 其 id 名 称 为 myCanvas， 其 高 度 和 宽度 都 为 500 像素 ， 
并 定义 了 画布 边框 显示 样式 。 

在 JavaScript 代码 中 ， 首 先 获取 画布 对 象 ， 然 后 使 用 getContext 获取 当前 2d 的 上 下 文 对 
象 ， 并 使 用 flIRect 绘制 矩形 。 其 中 涉及 到 fillStyle 属性 ，filstyle 用 于 设 定 填充 的 颜色 、 透 明 
度 等 ， 如 果 设 置 为 rgb (200.0.0) ， 则 表示 颜色 ， 不 透明 ， 如 果 设 为 rgb (0,0,200,0.5) ， 也 表 
示 为 颜色 ， 透明 度 为 50%。 

在 正 9.0 中 浏览 效果 如 图 9-1 所 示 ， 可 以 看 到 网 页 中 ， 在 蓝 色 边框 中 显示 了 一 个 蓝 色 矩形 。 


[= 区 中 


[vachi urihm Dp- ox| 全 Pthehl77lhiml * 


图 9-1 绘制 矩形 
9.2 绘制 基本 形状 


画布 canvas 结合 JavaScript 不 但 可 以 绘制 简单 的 矩形 ， 还 可 以 绘制 一 些 其 他 的 常见 图 形 ， 
例如 直线 、 圆 等 。 


9.2.1 绘制 圆 形 


基于 canvas 的 绘图 并 不 是 直接 在 canvas 标记 所 创建 的 绘图 画面 上 进行 各 种 绘图 操作 ， 而 
是 依赖 画面 所 提供 的 演 染 上 下 文 (Rendering Context) 来 操作 的 ， 所 有 的 绘图 命令 和 属性 都 定 
义 在 演 染 上 下 文 当中 。 在 通过 canvas id 获取 相应 的 DOM 对 象 之 后 首先 要 做 的 事情 就 是 获取 
泻 染 上 下 文 对 象 , 演 染 上 下 文 与 canvas 一 一 对 应 ,无 论 对 同一 canvas 对 象 调 用 几 次 getContext() 
方法 ， 都 将 返回 同一 个 上 下 文 对 象 。 

在 画布 中 绘制 圆 形 ， 可 能 要 涉及 到 下 面 几 个 方法 ， 如 下 表 所 示 。 


开始 绘制 路 径 
x 和 y 定义 的 是 圆 的 原点 ，radius 是 圆 的 半径 ，startAngle 和 endAngle 是 
弧度 ,不 是 度数 ，anticlockwise 用 来 定义 所 画 圆 的 方向 ， 值 是 true 或 false 
结束 路 径 的 绘制 


beginPath() 
arc(x,y,radius,startAngle, 
endAngle,anticlockwise) 
fil0 


方法 设置 边框 


168° 
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路 径 是 绘制 自 定义 图 形 的 好 方法 ， 在 canvas 中 通过 beginPath() 方 法 开始 绘制 路 径 ， 这 个 


时 候 就 可 以 绘制 直线 、 曲 线 等 ， 绘 制 完 成 后 调用 fill0 和 strokeO 完 成 填充 和 设置 边框 ， 通 过 
closePath() 方 法 结束 路 径 的 绘制 。 


【 例 9.2】〔 实 例文 件 ，ch09\9.2.html) 


<!DOCTYPE html> 

<html> 

<body> 

<canvas id="myCanvas" width="200" height="200" style="border: 1px solid blue"> 
Your browser does not support the canvas element. 
</canvas> 

<script type="text/JavaScript"> 

var c=document.getElementById("myCanvas"): 
Var cxt=c.getContext("2d"); 
cxt.fillStyle="#FFaa00":; 

cxt.beginPath(); 
cxt.arc(70,18,15,0,Math.PI*2,true); 
cxt.closePath(); 

cxt.fill0; 

</script> 

</body> 

</html> 


上 面 的 JavaScript 代码 中 ， 使 用 beignPath 方法 开启 一 个 路 径 ， 然 后 绘制 一 个 圆 形 ， 下 面 


关闭 这 个 路 径 并 填充 。 


圆 。 


在 正 9.0 中 的 浏览 效果 如 图 9-2 所 示 ， 可 以 看 到 网 页 中 ,在 矩形 边框 中 显示 了 一 个 黄色 的 


jE 


Ee 由 司 Fehint72html PD ~ OX|@ Ftchini72hml x| 


图 9-2 绘制 椭圆 


9.2.2 使 用 moveTo 与 lineTo 绘制 直线 


在 每 个 canvas 实例 对 象 中 都 拥有 一 个 path 对 象 ， 创 建 自 定义 图 形 的 过 程 就 是 不 断 对 path 
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对 象 操作 的 过 程 。 每 当 开始 一 次 新 的 图 形 绘 制 任务 ， 都 需要 先 使 用 beginPath() 方 法 来 重 置 path 
对 象 至 初始 状态 ， 进 而 通过 一 系列 对 moveTo/lineTo 等 画 线 方法 的 调用 ， 绘 制 期 望 的 路 径 ， 其 
中 moveTo (x, y) 方法 设置 绘图 起 始 坐 标 ， 而 lineTo (x.y) 等 画 线 方法 可 以 从 当前 起 点 绘制 
直线 、 圆 弧 以 及 曲线 到 目标 位 置 。 最 后 一 步 ， 也 是 可 选 的 步骤 ， 是 调用 closePath() 方 法 将 自 定 
义 图 形 进行 闭合 ， 该 方法 将 自动 创建 一 条 从 当前 坐标 到 起 始 坐 标的 直线 。 
绘制 直线 常用 的 方法 是 moveTo 和 lineTo， 其 含义 如 下 表 所 示 。 
不 绘制 ， 只 是 将 当前 位 置 移动 到 新 目标 坐标 (xy) ， 并 作为 线条 开始 点 
绘制 线条 到 指定 的 目标 坐标 x,y》 ， 并 且 在 两 个 坐标 之 间 画 一 条 直线 。 不 管 


lineTo (x,y) 调用 哪 一 个 ， 都 不 会 真正 画 出 图 形 ， 因 为 还 没有 调用 stroke (绘制 ) 和 各 1 ( 填 


充 ) 函数 。 当 前 ， 只 是 在 定义 路 径 的 位 置 ， 以 便 后 面 绘制 时 使 用 
ET 


【 例 9.3】“《 实 例文 件 : ch09\9.3.html) 


<!DOCTYPE html> 

<html> 

<body> 

<canvas id="myCanvas" width="200" height="200" style="border: 1px solid blue"> 
Your browser does not support the canvas element. 
</canvas> 

<script type="text/JavaScript"> 

var c=document.getElementById("myCanvas"): 
Var cxt=c.getContext("2d"); 

cxt.beginPath(); 

cxt.strokeStyle="rgb(0.182.0)": 
cxt.moveTo(10,10):; 

cxt.lineTo(150,50); 

cxtlineTo(10.50); 

cxt.lineWidth=14; 

cxt.stroke(); 

cxt.closePath(); 

</script> 

</body> 

</html> 


上 面 代码 中 ， 使 用 moveTo 方法 定义 一 个 坐标 位 置 为 《10.10) ， 下 面 以 此 坐标 位 置 为 起 
点 绘制 了 两 个 不 同 的 直线 ， 并 使 用 lineWidth 设置 直线 的 宽带 ， 使 用 strokeStyle 设置 了 直线 的 
颜色 ， 使 用 lineTo 设置 了 两 个 不 同 直线 的 结束 位 置 。 

在 正 9.0 中 的 浏览 效果 如 图 9-3 所 示 ， 可 以 看 到 网 页 中 ， 绘 制 了 两 个 直线 ， 这 两 个 直线 在 
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一 


图 9-3 绘制 直线 
9.2.3 使 用 bezierCurveTo 绘制 贝 济 埃 曲 线 


在 数学 的 数值 分 析 领 域 中 ， 贝 济 埃 曲 线 (Bezier 曲线 ) 是 计算 机 图 形 学 中 相当 重要 的 参数 
曲线 。 更 高 维度 的 广泛 化 贝 济 埃 曲线 就 称 作 贝 济 埃 曲 面 ， 其 中 贝 济 埃 三 角 是 一 种 特殊 的 实例 。 

bezierCurveTo0 表 示 为 一 个 画布 的 当前 子路 径 添加 一 条 三 次 贝 塞 尔 曲 线 。 这 条 曲线 的 开始 
点 是 画布 的 当前 点 , 而 结束 点 是 (x, y) 。 两 条 贝 塞 尔 曲线 控制 点 (cpX1, cpY1) 和 (cpX2, cpY2) 
定义 了 曲线 的 形状 。 当 这 个 方法 返回 的 时 候 ， 当 前 的 位 置 为 (x,y) 。 

方法 bezierCurveTo 具体 格式 如 下 所 示 : 

bezierCurveTo(cpX1, cpY1, cpX2, cpY2, x, y) 


其 参数 的 含义 如 下 表 所 示 。 


cpX1, cpY1 和 曲线 的 开始 点 (当前 位 置 ) 相 关联 的 控制 点 的 坐标 


和 曲线 的 结束 点 相关 联 的 控制 点 的 坐标 


曲线 的 结束 点 的 坐标 


【 例 9.4】〔 实 例文 件 ，ch09\9.4.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 贝 济 埃 曲线 </tile> 

<script> 

function draw(id) 

var canvas=document.getElementById(id): 
if(canvas—null) 
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Teturn false; 
Var context—canvas.getContext('2d"); 
context.fillStyle="#eeeeff"'; 
context.fillRect(0,0,400,300); 
var n=0; 
var dx=150; 
var dy=150; 
var s=100; 
context.beginPath(); 
context.globalCompositeOperation='and'; 
context.fillStyle='rgb(100,255,100)'; 
context.strokeStyle='rgb(0,0,100)'; 
Var x=Math.sin(0); 
Var y=Math.cos(0); 
Var dig=Math.PL/15*11; 
for(var i=0:i<30:i++) 
{ 
Var x=Math.sin(i*dig); 
Var y=Math.cos(i*dig); 
context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*st+100,dy+y*s,dx 


+x*s,dy+y*s); 
} 
context.closePath(): 
context.fill(); 
context.stroke(); 
bk 
</script> 
</head> 
<body onload="draw('canvas"):"> 
<h1> 绘 制 元 素 </hl> 
<canvas id="canvas" width="400" height="300" /> 
</body> 
</html> 


在 上 述 函 数 draw 中 ， 首 先 使 用 语句 fllRect (0,0,400,300) 绘制 了 一 个 矩形 ， 其 大 小 和 夯 
布 相同 ， 其 填充 颜色 为 浅 青色 ; 然后 定义 变量 ， 用 于 设 定 曲线 的 坐标 位 置 ， 在 for 循环 中 使 用 
bezierCurveTo 绘制 贝 济 埃 曲 线 。 

在 下 9.0 中 的 浏览 效果 如 图 9-4 所 示 ， 可 以 看 到 网 页 中 显示 了 一 个 贝 济 埃 


H 线 。 
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图 9-4“ 贝 济 埃 曲线 
9.3 绘制 渐变 图 形 


渐变 是 两 种 或 更 多 颜色 的 平滑 过 度 , 是 指 在 颜色 集 上 使 用 逐步 抽样 算法 将 结果 应 用 于 描 边 
样式 和 填充 样式 中 。canvas 的 绘图 上 下 文 支持 两 种 类 型 的 渐变 : 线性 渐变 和 放射 性 渐变 ， 其 中 
放射 性 渐变 也 称 为 径 向 渐变 。 


9.3.1 绘制 线性 渐变 
创建 简单 的 渐变 ， 非 党 容易， 可 能 比 使 用 Photoshop 还 要 快 ， 使 用 渐变 需要 三 个 步 又 : 
L@ 风 创建 渐变 对 象 ， 其 代码 如 下 : 
var gradient=cxt.createLinearGradient(0,0,0,canvas.height): 
82 为 渐变 对 象 设置 颜色 ， 指 明 过 渡 方 式 ， 其 代码 如 下 : 


gradient.addColorStop(0,#fff):; 
gradient.addColorStop(1,'#000"); 


ti@3j 在 context 上 为 填充 样式 或 者 描 边 样式 设置 渐变 ， 其 代码 如 下 : 
cxt.fillStyle=gradient; 


要 设置 显示 颜色 ， 在 渐变 对 象 上 使 用 addColorStop 函数 即 可 。 除 了 可 以 变换 成 其 他 颜色 
外 ， 还 可 以 为 颜色 设置 alpha 值 〈 例 如 透明 ) ， 并且 alpha 值 也 是 可 以 变化 的 。 为 了 达到 这 样 
的 效果 ， 需 要 使 用 颜色 值 的 另 一 种 表示 方法 ， 例 如 内 置 alpha 组 件 的 CSSrgba 函数 。 

绘制 线性 渐变 ， 会 使 用 到 下 面 几 个 方法 ， 如 下 表 所 示 。 
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addColorStop 


函数 允许 指定 两 个 参数 :颜色 和 偏 移 量 。 颜 色 参数 是 指 开 发 人 员 希 
望 在 偏 移 位 置 描 边 或 填充 时 所 使 用 的 颜色 。 偏 移 量 是 一 个 0.0~1.0 之 
间 的 数值 ， 代 表 沿 着 渐变 线 渐变 的 距离 有 多 远 。 


createLinearGradient (x0,.y0.xl.xl) 


沿 着 直线 从 〈x0.y0) 至 〈x1.y1) 绘制 渐变 


【 例 9.5】 “实例 文件 ， ch09\9.5.html) 


<!DOCTYPE html> 
<html> 

<head> 
<title> 线 性 渐变 </title> 
</head> 

<body> 

<h1> 绘 制 线性 渐变 </h1> 


<canvas id="canvas" width="400" height="300" style="border: 1px solid red"/> 


<script type="text/JavaScript"> 


Var c=document.getElementById("canvas"); 


Var cxt=c.getContext("2d"); 


Var gradient=cxt.createLinearGradient(0,0,0,canvas.height); 


gradient.addColorStop(0,#fff): 
gradient.addColorStop(1,'#000"): 
cxt.fillStyle=gradient; 
cxt.fillRect(0,0,400,400); 
</script> 

</body> 

</html> 


上 面 的 代码 使 用 2D 环境 对 象 产生 了 一 个 线性 渐变 对 象 ， 渐 变 的 起 始点 时 (0.0)， 渐 变 的 结 
束 点 是 (0,canvas.height)， 下 面 使 用 addColorStop 函数 设置 渐变 颜色 , 最 后 将 渐变 填充 到 上 下 文 


环境 的 样式 中 。 


在 正 9.0 中 的 浏览 效果 如 图 9-5 所 示 ， 可 以 看 到 网 页 中 ， 创 建 了 一 个 垂直 方向 上 的 渐变 ， 


从 上 到 下 颜色 逐渐 变 深 。 
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图 9-5 线性 渐变 
9.3.2 ”绘制 径 向 渐变 


除了 线性 渐变 以 外 , HTML 5 Canvas API 还 支持 放射 性 渐变 ， 所 谓 放射 性 渐变 就 是 颜色 会 
介 于 两 个 指定 圆 间 的 锥 形 区 域 平滑 变化 。 放 射 性 渐变 和 线性 渐变 使 用 的 颜色 终止 点 是 一 样 的 。 
如 果 要 实现 放射 线 渐变 ， 即 径 向 渐变 ， 需 要 使 用 方法 createRadialGradient。 

createRadialGradient (x0,y0,r0,xl,yl,r1) 方法 表示 沿 着 两 个 圆 之 间 的 锥 面 绘 制 渐变 。 其 中 
前 三 个 参数 代表 开始 的 圆 ， 圆 心 为 (x0.y0)， 半 径 为 rr。 最 后 三 个 参数 代表 结束 的 圆 ， 圆 心 为 
(xl,y1) ， 半 径 为 zl。 

【 例 9.6】 《实例 文件 ，ch09\9.6html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 径 向 渐变 </title> 

</head> 

<body> 

<h1> 绘 制 径 向 渐变 </h1> 

<canvas id="canvas" width="400" height="300" style="border: 1px solid red"/> 
<script type="text/JavaScript"> 

var c=document.getElementById("canvas"); 

Var cxt=c.getContext("2d"); 

var gradient=cxt.createRadialGradient(canvas.width/2,canvas.height/2,0,canvas.width/2,canvas.height/2,150):; 
gradient.addColorStop(0,'#ffF); 

gradient.addColorStop(1,#000"): 

cxt.fillStyle=gradient: 

cxt.fillRect(0,0,400,400):; 

</script> 
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</body> 

</html> 

上 面 代 码 中 ， 首 先 创 建 渐变 对 象 gradient， 此 处 使 用 方法 createRadialGradient 创建 了 一 个 
径 向 渐变 ， 下 面 使 用 addColorStop 添加 颜色 ， 最 后 将 渐变 填充 到 上 下 文 环 境 中 。 

在 正 9.0 中 的 浏览 效果 如 图 9-6 所 示 ， 可 以 看 到 从 圆 的 中 心 亮点 开始 ， 向 外 逐步 发 散 ， 形 
成 了 一 个 径 向 渐变 。 


[二 十 忆 -医治 
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图 9-6 径 向 渐变 
9.4 绘制 变形 图 形 


画布 canvas 不 但 可 以 使 用 moveTo 这 样 的 方法 来 移动 画笔 ， 绘 制图 形 和 线条 ， 还 可 以 使 
用 变换 来 调整 画笔 下 的 画布 。 变 换 的 方法 包括 : 旋转 、 缩 放 、 变 形 和 平移 等 。 


9.4.1 变换 原点 坐标 


平移 (translate) ， 即 将 绘图 区 相对 于 当前 画布 的 左上 和 角 进 行 平 移 ， 如 果 不 进 行 变形 ， 绘 
图 区 原点 和 画布 原点 是 重合 的 , 绘图 区 相当 于 画图 软件 里 的 热 区 或 当前 层 。 如 果 进 行 变形 ， 则 
坐标 位 置 会 移动 到 一 个 新 位 置 。 

如 果 要 对 图 形 实现 平移 ， 需 要 使 用 方法 translate(x.y)， 该 方法 表示 在 平面 上 平移 ， 即 以 原 
来 的 原点 为 参考 ， 然 后 以 偏 移 后 的 位 置 作为 坐标 原点 ， 也 就 是 说 如 果 原 来 在 (100.100)， 
translate(1.1) 后 ， 新 的 坐标 原点 在 (101.101) 而 不 是 (1.1)。 

【 例 9.7】 “实例 文件 :ch09\9.7.html) 


<!DOCTYPE html> 

<html> 

<head> 
<title> 绘 制 坐标 变换 </title> 


在 draw 函数 中 , 使 用 fIRect 方法 绘制 了 一 个 矩形 , 在 下 面 使 用 translate 方法 将 其 平移 到 
了 一 个 新 位 置 ， 并 从 新 位 置 开 始 ， 使 用 for 循环 ， 连 续 移 动 多 次 坐标 原点 ， 即 多 次 绘制 矩形 。 

在 正 9.0 中 的 浏览 效果 如 图 9-7 所 示 ， 可 以 看 到 网 页 中 从 坐标 位 置 〈200.50) 开始 绘制 得 
形 ， 并 每 次 以 指定 的 平移 距离 绘制 矩形 。 


< SEC 
变换 原点 坐标 


9-7 变换 坐标 原点 
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9.4.2 ”图 形 缩放 


对 于 变形 图 形 来 说 ， 其 中 最 常用 的 方式 ， 就 是 对 图 形 进行 缩放 ， 即 以 原来 图 形 为 参考 ， 放 
大 或 者 缩小 图 形 ， 从 而 增加 效果 。 

如 果 要 实现 图 形 缩放 ， 需 要 使 scale (x,y) 函数 ， 该 函数 带 有 两 个 参数 ， 分 别 代表 在 x，y 
两 个 方向 上 的 值 。 每 个 参数 在 canvas 显示 图 像 的 时 候 , 向 其 传递 在 本 方向 轴 上 图 像 要 放大 (或 
者 缩小 ) 的 量 。 如 果 x 值 为 2, 就 代表 所 绘制 图 像 中 全 部 元 素 都 会 变 成 两 倍 宽 。 如 果 y 值 为 0.5， 
绘制 出 来 的 图 像 全 部 元 素 都 会 变 成 之 前 的 一 半 高 。 

【 例 9.8】〔 实 例文 件 ，ch09\9.8.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 绘 制图 形 缩放 </title> 
<script> 
function draw(id) 
ut 
var canvas=document.getElementById(id); 
if(canvas=—null) 
Teturn false: 
Var context=canvas.getContext('2d"); 
context.fillStyle="#eeeeff"'; 
context.fillRect(0,0,400,300); 
context.translate(200,50): 
context.fillStyle='rgba(255,0,0,0.25)'; 
for(var 二 0;i<S0:i++){ 
context.scale(3,0.5); 
context.fillRect(0,0,100,50); 


} 
</script> 
</head> 
<body onload="draw('canvas"):"> 
<h1> 图 形 缩放 </h1> 
<canvas id="canvas" width="400" height="300" /> 
</body> 
</html> 


上 面 代码 中 ， 缩 放 操作 是 放 在 for 循环 中 完成 的 ， 在 此 循环 中 ， 以 原来 图 形 为 参考 物 ， 使 
其 在 x 轴 方向 增加 为 三 倍 宽 ，y 轴 方 向 上 变 为 原来 的 一 半 。 
在 正 9.0 中 的 浏览 效果 如 图 9-8 所 示 ， 可 以 看 到 网 页 中 在 一 个 指定 方向 绘制 了 多 个 矩形 。 


使 用 HTML 5 绘制 图 形 ”第 9 党 


[< 证 | F 天 wttchl7N7.8 html DP - OX | Gre 


图 形 缩放 


图 9-8 图 形 缩放 
9.4.3 ”旋转 图 形 


变换 操作 并 不 限于 缩放 和 平移 ， 还 可 以 使 用 函数 context.rotate (angle) 来 旋转 图 像 ， 甚 至 
可 以 直接 修改 底层 变换 矩阵 以 完成 一 些 高 级 操作 ， 如 剪裁 图 像 的 绘制 路 径 。 例 如 context.rotate 
(1.57) 表示 旋转 角度 参数 以 弧度 为 单位 。 

rotate() 方 法 默认 地 从 左上 端的 (0.0) 开 始 旋转 ， 通 过 指定 一 个 角度 ， 改 变 画 布 坐标 和 Web 
浏览 器 中 <canvas> 元 素 像素 之 间 的 映射 ， 使 得 任意 后 续 绘图 在 画布 中 都 显示 为 旋转 的 ， 但 并 没 
有 旋转 <canvas> 元 素 本 身 。 注 意 ， 这 个 角度 是 用 弧度 指定 的 。 

【 例 9.9】【〔 实 例文 件 ，ch09\9.9.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 绘 制 旋 转 图 像 </title> 
<script> 
function draw(id) 
uf 
var canvas=document.getElementById(id); 
if(canvas—null) 
Teturn false; 
Var context=canvas.getContext(2d"):; 
context.fillStyle="#eeeeff"; 
context.fillRect(0,0,400,300); 
context.translate(200,50): 
context.fillStyle='rgba(255,0,0,0.25)'; 
for(var 1=0;1<50;1++){ 
context.rotate(Math.PL/10): 
context fillRect(0.0.100.50): 
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</script> 

</head> 

<body onload="draw('canvas"):"> 

<h1> 旋 转 图 形 </h1> 

<canvas id="canvas" width="400" height="300" /> 
</body> 

</html> 


上 面 代码 中 ， 使 用 rotate 方法 在 for 循环 中 对 多 个 图 形 进行 旋转 ， 其 旋转 角度 相同 。 
在 下 9.0 中 的 浏览 效果 如 图 9-9 所 示 , 在 显示 页 面 上 多 个 矩形 以 中 心 弧 度 为 原点 进行 旋转 。 
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图 9-9 旋转 图 形 


9.5 图形 组 合 


在 前 面 介绍 的 知识 里 面 , 可 以 将 一 个 图 形 画 在 男 一 个 图 形 之 上 ,大 多 数 情况 下 ,这 样 是 不 
够 的 。 例 如 说 ， 这 样 会 受制 于 图 形 的 绘制 顺序 。 不 过 ， 可 以 利用 globalCompositeOperation 属 
性 来 改变 这 些 做 法 。 不 仅 可 以 在 已 有 图 形 后 面 再 画 新 图 形 , 还 可 以 用 来 遮盖 、 清 除 ( 比 clearRect 
方法 强劲 得 多 ) 某 些 区 域 。 

其 语法 格式 如 下 : 


globalCompositeOperation = type 


表示 设置 不 同形 状 的 组 合 类 型 ， 其 中 type 表示 方 的 图 形 是 已 存在 的 canvas 内 容 ， 圆 的 图 
形 是 新 的 形状 ， 其 默认 值 为 source-over， 表 示 在 canvas 内 容 上 面 画 新 的 形状 。 
属性 值 type 具有 12 个 含义 ， 其 具体 含义 如 下 表 所 示 。 
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属性 值 


source-over (default) 


说 明 
这 是 默认 设置 ， 新 图 形 会 覆盖 在 原 有 内 容 之 上 


destination-over 


会 在 原 有 内 容 之 下 绘制 新 图 形 


source-in 


新 图 形 会 仅仅 出 现 与 原 有 内 容重 嫩 的 部 分 。 其 他 区 域 都 变 成 透明 的 


destination-in 


原 有 内 容 中 与 新 图 形 重 肥 的 部 分 会 被 保留 ， 其 他 区 域 都 变 成 透明 的 


source-out 


结果 是 只 有 新 图 形 中 与 原 有 内 容 不 重 冯 的 部 分 会 被 绘制 出 来 


destination-out 


原 有 内 容 中 与 新 图 形 不 重 释 的 部 分 会 被 保留 


source-atop 


新 图 形 中 与 原 有 内 容重 辣 的 部 分 会 被 绘制 ， 并 敌 闵 于 原 有 内 容 之 上 


destination-atop 


原 有 内 容 中 与 新 内 容重 受 的 部 分 会 被 保留 ， 并 会 在 原 有 内 容 之 下 绘制 新 图 形 


lighter 两 图 形 中 重 肥 部 分 绘制 两 种 颜色 值 相 加 的 颜色 
darker 两 图 形 中 重 闪 的 部 分 绘制 两 种 颜色 值 相 减 的 颜色 
xor 重 营 的 部 分 会 变 透明 

copy 只 有 新 图 形 会 被 保留 ， 其 他 都 被 清除 掉 


【 例 9.10】“ 实 例文 件 ，ch09\9.10.html) 


<!DOCTYPE html> 
<html> 
<head> 


<title> 绘 制图 形 组 合 </title> 


<script> 
function draw(id) 
{ 


var canvas=document.getElementById(id): 


if(canvas==null) 
return false; 


Var context=canvas.getContext('2d"); 


Var oprtns=new Array( 
"source-atop", 
"source-in", 
"source-out", 
"source-Over", 
"destination-atop", 
"destination-in", 
"destination-out", 
"destination-over", 
"lighter", 
"copy", 
So 
入 


Var 二 10: 
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context.fillStyle="blue"; 
context.fillRect(10,10,60,60): 
context.globalCompositeOperation=oprtns[i]:; 
context.beginPath(); 
context.fillStyle="red"; 
context.arc(60,60,30,0,Math.PI*2,false); 
context.fill(); 
} 
</script> 
</head> 
<body onload="draw('canvas"):"> 
<h1> 图 形 组 合 </h1> 
<canvas id="canvas" width="400" height="300" /> 
</body> 
</html> 


在 上 面 的 代码 中 ， 首 先 创建 了 一 个 oprtns 数组 ， 用 于 存储 type 的 12 个 值 ， 然 后 绘制 了 一 
个 矩形 ， 并 使 用 content 上 下 文 对 象 设置 了 图 形 的 组 合 方式 ， 即 采用 了 新 图 形 显 示 ， 其 他 被 清 
除 的 方式 ， 最 后 使 用 arc 绘制 了 一 个 圆 。 

在 正 9.0 中 的 浏览 效果 如 图 9-10 所 示 ， 在 显示 页 面 上 绘制 了 一 个 矩形 和 圆 ， 但 矩形 和 圆 
接触 的 地 方 ， 以 空白 显示 。 
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图 9-10 图 形 组 合 


9.6 ”绘制 带 阴 影 的 图 形 


在 画布 canvas 上 绘制 带 有 阴影 效果 的 图 形 非 常 简单 ， 只 需要 设置 几 个 属性 即 可 。 这 几 个 
属性 分 别 为 shadowOffsetX、shadowOffsetY、shadowBlur 和 shadowColor， 其 属性 shadowColor 
表示 阴影 颜色 ， 其 值 和 CSS 颜色 值 一 致 。shadowBlur 表示 设置 阴影 模糊 程度 。 此 值 越 大 ， 阴 
影 越 模糊 。shadowOffsetX 和 shadowOffsetY 属性 表示 阴影 的 x 和 y 偏 移 量 ， 单 位 是 像素 。 

【 例 9.11】 “实例 文件 :ch09\9.11 .html) 


<!DOCTYPE html> 
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<html> 
<head> 
<title> 绘 制 阴影 效果 图 形 </title> 
</head> 
<body> 
<canvas id="my_canvas" width="200" height="200" style="border: 1px solid #ff0000"></canvas> 
<script type="text/JavaScript"> 
Var elem = document.getElementById("my_canvas"); 
if (elem && elem.getContext) { 
Var context = elem.getContext("2d"); 
//shadowOffsetX 和 shadowOffsetY: 阴影 的 x 和 y 偏 移 量 ， 单 位 是 像素 。 
context.shadowOffsetX = 15; 
context.shadowOffsetY = 15; 
/hadowBlur: 设置 阴影 模糊 程度 。 此 值 越 大 ， 阴 影 越 模糊 。 其 效果 和 Photoshop 的 高 斯 


模糊 滤 镜 相同 。 
context.shadowBlur =10; 
//shadowColor: 阴影 颜色 。 其 值 和 CSS 颜色 值 一 致 。 
//context.shadowColor ”='rgba(255, 0, 0, 0.5); 或 下 面 的 十 六 进 制 的 表示 方法 
context.shadowColor = '#f00"; 
context.fillStyle = #00f:; 
context.fillRect(20, 20, 150, 100); 
; 
</script> 
</body> 
</html> 


在 正 9.0 中 的 浏览 效果 如 图 9-11 所 示 ， 在 显示 页 面 上 显示 了 一 个 蓝 色 和 矩形， 其 阴影 为 
色 和 矩形 。 
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图 9-11 带 有 阴影 的 图 形 
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9.7 ”使 用 图 


像 


画布 canvas 有 一 项 功能 就 是 可 以 引入 图 像 ， 它 可 以 用 于 图 片 合成 或 者 制作 背景 等 。 而 目 
前 仅 可 以 在 图 像 中 加 入 文字 。 只 要 是 Geck 支持 的 图 像 (如 PNG，GIF，JPEG 等 ) 都 可 以 引 
入 到 canvas 中 ， 而 且 其 他 的 canvas 元 素 也 可 以 作为 图 像 的 来 源 。 


9.7.1 绘制 图 像 
要 在 画布 canvas 上 绘制 图 像 , 需要 先 有 一 个 图 片 。 


这 个 图 片 可 以 是 已 经 存在 的 <img> 元 素 ， 


或 者 通过 JS 创建 。 无 论 采 用 哪 种 方式 ， 都 需要 在 绘制 canvas 之 前 ， 加 载 这 张 图 片 。 浏 览 器 通 
常会 在 页 面 脚本 执行 的 同时 异步 加 载 图 片 。 如 果 试 图 在 图 片 未 完全 加 载 之 前 就 将 其 呈现 到 


canvas 上 ， 那 么 canvas 将 不 会 显示 任何 图 片 。 
捕获 和 绘制 图 形 完 全 是 通过 drawImage 方法 完成 
体 含义 如 下 表 所 示 。 


的 ， 它 可 以 接受 不 同 的 HTML 参数 ， 具 


方法 说 明 

接受 一 个 图 
drawIamge (image,dx,dy) (dx,dy) 代 表 
接受 一 个 图 


drawIamge (image,dx,dy,dw,dh) 
然后 把 它 画 


画 到 canvas 的 左上 角 。 


片 ， 并 将 之 画 到 canvas 中 。 给 出 的 坐标 
图 片 的 左上 角 。 例 如 ， 坐 标 (0.0) 将 把 图 片 


片 ， 将 其 缩放 ， 宽 度 为 dw 和 高 度 为 dh， 
到 canvas 上 的 (dx,dy) 位 置 


接受 一 个 图 
drawIamge (image,sx,sy,sw,sh,dx,dy,dw.,dh) 


【 例 9.12】 《实例 文件 ，ch09\9.12.html) 


<!DOCTYPE html> 

<html> 

<head><title> 绘 制图 像 </title></head> 
<body> 


的 范围 ， 缩 放 到 (dw,dh) 大 小 ， 最 后 把 它 夯 到 canvas 
上 的 (dx,dy) 位 置 


片 ， 通 过 参数 (sx,sy,sw,sb) 指 定 图 片 裁剪 


<canvas id="canvas" width="300" height="200" style="border:1px solid blue"> 


Your browser does not support the canvas element. 
</canvas> 

<script type="text/JavaScript"> 
window.onload=function(){ 


Var ctx=document.getElementById("canvas").getContext("2d"); 


Var img—new Image(); 

img.sre="01.jpg"; 

img.onload=functionO{ 
ctx.drawImage(img,0,0); 
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在 上 面 代码 中 ， 使 用 窗口 的 onload 加 载 事 件 ， 即 页 面 被 加 载 时 执行 函数 。 在 函数 中 ， 创 
建 上 下 文 对 象 ctk， 并 创建 Image 对 象 mg; 下 面 使 用 img 对 象 的 属性 src 设置 图 片 来 源 ， 最 后 
使 用 drawImage 画 出 当前 的 图 像 。 

在 正 9.0 中 的 浏览 效果 如 图 9-12 所 示 , 在 页 面 上 绘制 了 一 个 图 像 ， 并 在 画布 中 显示 出 来 。 
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图 9-12 绘制 图 像 

9.7.2 图 像 平 铺 

使 用 画布 canvas 绘制 图 像 ， 有 很 多 种 用 处 ， 其 中 一 个 用 处 就 是 将 绘制 的 图 像 作为 背景 图 
片 使 用 。 在 做 背景 图 片 时 ,如果 显 示 图 片 的 区 域 大 小 不 能 直接 设 定 , 通常 将 图 片 以 平 铺 的 方式 
显示 。 

HTML 5 Canvas API 支持 图 片 平 铺 , 此 时 需要 调用 createPattern 函数 , 即 调用 createPattern 
函数 来 替代 之 前 的 drawImage 函数 。 函 数 createPattern 的 语法 格式 如 下 : 

createPattern(image,type) 

其 中 image 表示 要 绘制 的 图 像 ，type 表示 平 铺 的 类 型 ， 其 具体 含义 如 下 表 所 示 。 


参数 值 说 明 


no-repeat 不 平 铺 

Tepeat-x 横 方向 平 铺 
Tepeat-y 纵 方向 平 铺 
Tepeat 全 方向 平 铺 


【 例 9.13】 《实例 文件 :ch09\9.13 .html) 


<!DOCTYPE html> 
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<html> 
<head> 
<title> 绘 制图 像 平 铺 </title> 
</head> 
<body onload="draw('canvas"):"> 
<h1> 图 形 平 铺 </h1> 
<canvas id="canvas" width="400" height="300"></canvas> 
<script> 
function draw(id){ 
Var canvas=document.getElementById(id); 
这 canvas 一 nulD){ 
return false; 
; 
Var context=canvas.getContext('2d"): 
context.fillStyle="#eeeeff'; 
context.fillRect(0,0,400,300); 
image=new Image(); 
image.src="01.jpg": 
image.onload=function0){ 
Var ptm=context.createPattern(image,repeat); 
context.fillStyle=ptrn; 
context.fillRect(0,0,400,300):; 
} 
</script> 
</body> 
</html> 


上 面 代码 中 ， 使 用 fllRect 创建 了 一 个 宽度 为 400， 高 度 为 300， 左 上 角 坐 标 位 置 为 (0.0) 
的 和 矩形， 下面 创建 了 一 个 Image 对 象 ，src 表示 连接 一 个 图 像 源 ， 然 后 使 用 createPattern 绘制 
一 个 图 像 ， 其 方式 是 平 铺 ， 并 将 这 个 图 像 作为 一 个 模式 填充 到 矩形 中 。 最 后 绘制 这 个 矩形 ， 此 
和 矩形 大 小 完全 覆盖 原来 的 图 形 。 

在 下 9.0 中 的 浏览 效果 如 图 9-13 所 示 ， 在 显示 页 面 上 绘制 了 一 个 图 像 ， 其 图 像 以 平 铺 的 
方式 充满 整个 矩形 。 
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US 疏 R 源 文 作 chl7713html| 。 局 -CX 上 | 总 冯 制 加 从 铺 x 


图 形 平 铺 


图 9-13 图像 平 铺 
9.7.3 ”图像 栽 剪 


在 处 理 图 像 时 经 常会 遇 到 裁剪 这 种 需求 , 即 在 画布 上 裁剪 出 一 块 区 域 , 这 块 区 域 是 在 裁剪 
动作 clip 之 前 ， 由 绘图 路 径 设 定 的 ， 可 以 是 方形 、 圆 形 、 五 星 形 和 其 他 任何 可 以 绘制 的 轮廓 形 
状 。 所 以 , 裁剪 路 径 其 实 就 是 绘图 路 径 ， 只 不 过 这 个 路 径 不 是 拿 来 绘图 的 ， 而 是 设 定 显示 区 域 
和 遮挡 区 域 的 一 个 分 界线 。 

完成 对 图 像 的 裁剪 ， 可 能 要 用 到 clip 方法 。clip 方法 表示 给 canvas 设置 一 个 剪辑 区 域 , 在 
调用 clip 方法 之 后 的 代码 只 对 这 个 设 定 的 剪辑 区 域 有 效 , 不 会 影响 其 他 地 方 , 这 个 方法 在 要 进 
行 局 部 更 新 时 很 有 用 。 默 认 情况 下 ， 剪 辑 区 域 是 一 个 左上 角 在 〈0.0) ， 宽 和 高 分 别 等 于 canvas 
元 素 的 宽 和 高 的 矩形 。 

【 例 9.14】〈 实 例文 件 : ch09\9.14.html) 


<!DOCTYPE html> 
< html> 
<head> 
<title> 绘 制图 像 裁 前 </title> 
<script type="text/JavaScript" src="script.js"></script> 
</head> 
<body onload="draw('canvas"):"> 
<h1> 图 像 裁剪 实例 </h1l> 
<canvas id="canvas" width="400" height="300"></canvas> 
<script> 

function draw(id){ 

var canvas=document.getElementById(id); 
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建 , 并 以 此 图 形 作为 裁剪 的 依据 。 drawImg 函数 表示 绘制 一 个 图 形 , 其 


if(canvas—nulD){ 


return false; 


Var context=canvas.getContext('2d"): 

Var gr=context.createLinearGradient(0,400,300,0): 
gr.addColorStop(0,'rgb(255,255,0)"); 
gr.addColorStop(]1,'rgb(0,255,255)"); 
context.fillStyle=gr; 

context.fillRect(0,0,400,300); 

image=new Image(); 

image.onload=functionO{ 


drawImg(context,image); 


l 
image.src="01.jpg": 


} 


function drawImg(context,image){ 
create8StarClip(context): 
context.drawImage(image,-50,-150,300,300); 


} 


function create8StarClip(context){ 
var n=0; 
var dx=100; 
var dy=0; 
Var s=150; 
context.beginPath(); 
context.translate(100,150); 
Var x=Math.sin(0); 
var y=Math.cos(0); 
var dig=Math.PIS*4; 
for(var i=0;1<8;i++){ 


Var x=Math.sin(i*dig); 
var y=Math.cos(i*dig); 
context.lineTo(dx+x*s,dy+y*s): 


} 
context.clip(); 
} 
</script> 
</body> 
</html> 
上 面 代 码 中 ， 创 建 了 三 个 JavaScript 函数 ， 其 中 create8StarClip 函数 完成 了 多 边 的 图 形 创 


图 形 带 有 裁剪 


区 域 。 draw 
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函数 完成 对 画布 对 象 的 获取 ， 并 定义 线性 渐变 ， 然 后 创建 Image 对 象 。 
在 正 9.0 中 浏览 效果 如 图 9-14 所 示 ， 在 显示 页 面 上 绘制 如 图 所 示 图 形 ， 将 图 像 作 为 该 图 
形 的 背景 显示 ， 从 而 实现 对 图 像 的 裁剪。 
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图 像 裁剪 实例 


图 9-14 图 像 裁剪 
9.7.4 ”像素 处 理 


在 计算 机 屏幕 上 可 以 看 到 色彩 斑 调 的 图 像 ， 其实 这 些 图 像 都 是 由 一 个 个 像素 点 组 成 的 。 一 
个 像素 对 应 着 内 存 中 的 一 组 连续 的 二 进 制 位 ， 由 于 是 二 进 制 位 ， 每 个 位 上 的 取 值 当然 只 能 是 0 
或 者 1 了 , 这 样 ， 这 组 连续 的 二 进 制 位 就 可 以 由 0 和 ]1 排列 组 合 出 很 多 种 情况 ， 而 每 一 种 排列 
组 合 就 决定 了 这 个 像素 的 一 种 颜色 。 因 此 ， 每 个 像素 点 由 4 个 字 节 组 成 。 

这 4 个 字 节 代表 含义 分 别 是 , 第 一 个 字 节 决定 像素 的 红色 值 ; 第 二 个 字 节 决定 像素 的 绿色 
值 ， 第 三 个 字 节 决定 像素 的 蓝 色 值 ， 第 四 个 字 节 决定 像素 的 透明 度 值 。 

在 画布 中 ， 可 以 使 用 ImageData 对 象 来 保存 图 像 像 素 值 ， 它 有 width、height 和 data 三 个 
属性 ， 其 中 data 属性 就 是 一 个 连续 数组 ， 图 像 的 所 有 像素 值 其 实 是 保存 在 data 里 面 的 。 

data 属性 保存 像素 值 的 方法 : 


imageData.data[index*4 +0] 

imageData.data[index*4 +1] 

imageData.data[index*4 +2] 

imageData.data[index*4 +3] 

上 面 取出 了 data 数组 中 连续 相 邻 的 4 个 值 , 这 4 个 值 分 别 代表 了 图 像 中 第 index+1 个 像素 
的 红色 、 绿 色 、 蓝 色 和 透明 度 值 的 大 小 。 需 要 注意 的 是 index 从 0 开始 ， 图 像 中 总 共有 width * 
height 个 像素 ， 数 组 中 总 共 保 存 了 width * height * 4 个 数值 。 

画布 对 象 有 三 个 方法 用 来 创建 、 读 取 和 设置 ImageData 对 象 ， 如 下 表 所 示 。 
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方法 说 明 

createImageData (width, 在 内 存 中 创建 一 个 指定 大 小 的 ImageData 对 象 ( 即 像素 
height) 数组 ), 对 象 中 的 像素 点 都 是 黑色 透明 的 , 即 rgba(0,0,0,0) 
getImageData (x,y, width, 返回 一 个 ImageData 对 象 ， 这 个 IamgeData 对 象 中 包含 
height) 了 指定 区 域 的 像素 数组 

putImageData (data, x,y) 将 ImageData 对 象 绘制 到 屏幕 的 指定 区 域 上 


【 例 9.15】 “实例 文件 :ch09\9.15.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 图 像 像 素 处 理 </title> 
<script type="text/JavaScript" sre="script.ijs"></script> 
</head> 
<body onload="draw('canvas"):"> 
<h1> 像 素 处 理 示例 </hl> 
<canvas id="canvas" width="400" height="300"></canvas> 
<script> 
function draw(id){ 
var canvas=document.getElementById(id); 
if(canvas=—null){ 
return false; 
} 
Var context=canvas.getContext('2d'); 
image=new Image(); 
image.src="01.jpg"; 
image.onload=function0{ 
context.drawImage(image,0,0); 
var imagedata=context.getImageData(0,0,image.width,image.height); 
for(var i=0,n=imagedata.data.length:i<n:;i+=4){ 
imagedata.data[i+0]=255-imagedata.data[i+0]; 
imagedata.data[i+1]=255-imagedata.data[i+2]: 
imagedata.datafi+2]=255-imagedata.datafit+1]: 
有 
context.putImageData(imagedata.0.0): 


> 
</script> 
</body> 
</html> 
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在 上 面 代码 中 , 使 用 getImageData 方法 获取 一 个 ImageData 对 象 , 并 包含 相关 的 像素 数组 。 
在 for 循环 中 , 对 像素 值 重 新 赋值 , 最 后 使 用 puttmageData 将 处 理 过 的 图 像 在 画布 上 绘制 出 来 。 

在 正 9.0 中 的 浏览 效果 如 图 9-15 所 示 ， 在 显示 页 面 上 显示 了 一 个 图 像 ， 其 图 像 明显 经 过 
像素 处 理 ， 显 示 没 有 原来 清晰 。 


GO 司 ] FA 源 文件 chl7\17.15html 有 -CX | 总 图 从 从 素 处 理 x| 


像素 处 理 示 例 


图 9-15 像素 处 理 


9.8 绘制 文字 
在 画布 中 绘制 字符 串 〈 文 字 ) 的 方式 , 与 操作 其 他 路 径 对 象 的 方式 相同 ， 可 以 描绘 文本 轮 


廓 和 填充 文本 内 部 ， 同 时 ， 所 有 能 够 应 用 于 其 他 图 形 的 变换 和 样式 都 能 用 于 文本 。 
文本 绘制 功能 由 两 个 函数 组 成 ， 如 下 表 所 示 。 


绘制 带 fillStyle 填充 的 文字 , 文本 参数 以 及 用 于 指定 文本 位 置 的 坐标 
fillText (text,x,y,maxwidth) 参数 。maxwidth 是 可 选 参数 ， 用 于 限制 字体 大 小 ， 它 会 将 文本 字体 
强制 收缩 到 指定 尺寸 


绘制 只 有 strokeStyle 边框 的 文字 ， 其 参数 含义 和 方法 与 fllText 相同 


该 函数 会 返回 一 个 度量 对 象 ， 其 包含 了 在 当前 context 环境 下 指定 文 
measureText Ee 
本 的 实际 显示 宽度 


为 了 保证 文本 在 各 浏览 器 下 都 能 正常 显示 ， 在 绘制 上 下 文 里 有 以 下 字体 属性 : 

@ font 可 以 是 CSS 字体 规则 中 的 任何 值 。 包 括 字体 样式 、 字 体 变种 、 字 体 大 小 与 粗细 、 
行 高 和 字体 名 称 。 

@ textAlign 控制 文本 的 对 齐 方式 。 它 类 似 于 (但 不 完全 相同 ) CSS 中 的 text-align。 可 能 
的 取 值 为 start、end、left、right 和 center。 

@ textBaseline 控制 文本 相对 于 起 点 的 位 置 . 可 以 取 值 有 top、 hanging、 middle、 alphabetic、 
ideographic 和 bottom。 对 于 简单 的 英文 字母 ， 可 以 放心 的 使 用 top、middle 或 bottom 


作为 文本 基线 ， 
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【 例 9.16】 “实例 文件 ，ch09\9.16.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title>Canvas</title> 
</head> 
<body> 
<canvas id="my_canvas" width="200" height="200" style="border: 1px solid #ff0000"></canvas> 
<script type="text/JavaScript"> 
Var elem = document.getElementById("my_canvas"); 
if (elem && elem.getContext) { 
Var context = elem.getContext("2d"); 
context.fillStyle = #00f:; 
//font: 文字 字体 ， 同 CSSfont-family 属性 
context.font = 'italic 30px 微软 雅 黑 '; /斜体 30 像素 微软 雅 黑 字 体 
//textAlign: 文字 水 平 对 齐 方 式 。 可 取 属 性 值 : start, end, leftright, center。 默 认 值 :start. 
context.textAlign = 'left'; 
// 文 字 竖 直 对 齐 方 式 。 可 取 届 性 值 :top, hanging, middle,alphabetic, ideographic, bottom。 
默认 值 : alphabetic 
context.textBaseline = ‘top'; 
// 要 输出 的 文字 内 容 , 文字 位 置 坐标 , 第 四 个 参数 为 可 选 选项 一 一 最 大 宽度 。 如果 需 要 的 
话 ， 浏 览 器 会 缩减 文字 以 让 它 适应 指定 宽度 
context.fillText ("祖国 生日 快乐 !, 0, 0.50); /有 填充 
context.font = "bold 30px sans-serif: 
context.strokeText(' 祖 国生 日 快乐 !, 0, $50.100): /只 有 文字 边框 
} 
</script> 
</body> 
</html> 


在 正 9.0 中 的 浏览 效果 如 图 9-16 所 示 ， 在 页 面 上 显示 画布 边框 ， 画 布 中 显示 了 两 个 不 同 
的 字符 串 , 第 一 个 字符 串 以 斜体 显示 , 颜色 为 蓝 色 。 第 二 个 字符 串 字 体 颜色 为 黑色 , 加 粗 显示 。 
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图 9-16 绘制 文字 
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9.9 ”图 形 的 保存 与 恢复 


在 画布 对 象 绘制 图 形 或 图 像 时 , 可 以 将 这 些 图 形 或 者 图 形 的 状态 进行 改变 , 即 永久 保存 图 


形 或 图 像 。 
9.9.1 保存 与 恢复 


在 画布 对 象 中 ， 有 两 个 方法 管理 绘制 状态 的 当前 栈 ，save 方法 把 当前 状态 压 入 栈 中 ， 而 
restore 方法 从 栈 顶 弹出 状态 ， 绘 制 状态 不 会 覆盖 对 画布 所 做 的 每 件 事情 ， 其 中 save 方法 用 来 
保存 canvas 的 状态 。 调 用 完 save 方法 之 后 ， 可 以 调用 canvas 进行 平移 、 放 缩 、 旋 转 、 错 切 和 
裁剪 等 操作 。restore 方法 用 来 恢复 canvas 之 前 保存 的 状态 ， 防 止 调用 save 方法 后 对 canvas 执 
行 的 操作 对 后 续 会 制 有 影响 。save 方法 和 restore 方法 要 配对 使 用 (restore 方法 可 以 比 save 


方法 少 ， 但 不 能 


， 如 果 restore 方法 调用 次 数 比 save 方法 多 ， 会 引发 Error。 


【 例 9.17】 J ch09\9.17.html) 


<!IDOCTYPE html> 
<html> 


<head><title> 保 存 与 恢复 </title></head> 


<body> 


<canvas id="myCanvas" width="500" height="400" style="border: 1px solid blue"> 
Your browser does not support the canvas element. 


</canvas> 


<script type="text/JavaScript"> 

var c=document.getElementById("myCanvas"); 
Var ctx=c.getContext("2d"); 

ctx.fillStyle = "rgb(0,0,255)"; 


ctx.save(); 


ctx.fillRect(50,50,100,100): 
ctx.fillStyle = "rgb(255,0,0)"; 


ctx.save(); 


ctx.fillRect(200,50,100,100): 


ctx.restore() 


ctx.fillRect(350,50,100,100): 


ctx.restore(); 


ctx.fillRect(50. 200, 100, 100): 


</script> 
</body> 
</html> 


在 上 面 代码 中 ， 乡 


会 制 了 4 个 矩形 ， 在 第 一 个 矩形 绘制 之 前 ， 定 义 了 当前 矩形 的 显示 颜色 ， 


并 将 此 样式 加 入 到 栈 中 ,然后 创建 算 形 。 第 二 个 逢 形 绘制 之 前 ,重新 定义 矩形 显示 颜色 ， 并 使 


save 方法 将 此 样式 


压 入 到 栈 中 , 然后 创建 了 一 个 矩形 。 在 第 三 个 矩形 绘制 之 前 , 使 用 restore 
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方法 恢复 当前 显示 颜色 ， 即 调用 栈 中 的 最 上 层 颜色 , 绘制 矩形 。 第 四 个 矩形 绘制 之 前 ， 继 续 使 
restore 方法 ， 调 用 最 后 一 个 栈 中 元 素 定义 矩形 颜色 。 

在 正 9.0 中 的 浏览 效果 如 图 9-17 所 示 ， 在 页 面 上 绘制 了 4 个 矩形 ， 第 一 个 和 第 四 个 矩形 
显示 为 蓝 色 ， 第 二 个 和 第 三 个 矩形 显示 为 红色 。 


<】 | Frchin717 hm PD- ox|G ars 


红色 


图 9-17 恢复 和 保存 


9.9.2 ”保存 文件 


当 绘 制 出 漂亮 的 图 形 时 ， 有 时 需要 保存 这 些 劳动 成 果 。 这 时 可 以 将 画布 元 素 〈 而 不 是 2D 
环境 ) 的 当前 状态 导出 到 URL 数据 。 导 出 很 简单 ， 可 以 利用 toDataURL 方法 完成 ， 它 可 以 调 
用 不 同 的 图 片 格式 。 目 前 PNG 格式 才 是 定义 的 规范 格式 ， 其 他 浏览 器 还 支持 其 他 的 格式 。 

目前 Firefox 和 Opera 浏览 器 只 支持 PNG 格式 ，Safari 支持 GIF、PNG 和 JPG 格式 。 大 多 
数 浏览 器 支持 读 取 base64 编码 内 容 ， 例 如 一 幅 图 像 。URL 的 格式 如 下 。 


data:image/png:base64.iVBORwOKGgoAAAANSUhEUgAAAfQAAAHOCAYAAADLI1t 


它 以 一 个 data 开始 ， 然 后 是 mine 类 型 ， 之 后 是 编码 和 base64， 最 后 是 原始 数据 。 这 些 原 
台数 据 就 是 画布 元 素 所 要 导出 的 内 容 ， 并 且 浏 览 器 能 够 将 数据 编码 为 真正 的 资源 。 
【 例 9.18】 “实例 文件 ，ch09\9.9.html) 


<!DOCTYPE html> 

<html> 

<body> 

<canvas id="myCanvas" width="500" height="500" style="border:1px solid blue"> 
Your browser does not support the canvas element. 

</canvas> 

<script type="text/JavaScript"> 
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Var c=document.getElementById("myCanvas"); 

Var cxt—c.getContext("2d"); 
cxt.fillStyle='rgb(0,0,255)'; 
cxt.fillRect(0,0,cxt.canvas.width,cxt.canvas.height); 
cxt.fillStyle="rgb(0,255,0)"; 

cxt.fillRect(10,20,50,50); 
window.location=cxt.canvas.toDataURL(image/png "); 
</script> 

</body> 

</html> 


在 上 面 代 码 中 ， 使 用 canvas.toDataURL 语句 将 当前 绘制 的 图 像 保 存 到 URL 数据 中 。 
在 下 9.0 中 浏览 效果 如 图 9-18 所 示 ， 在 显示 页 面 中 无 任何 数据 显示 ， 并 且 提 示 无 法 显示 
该 页 面 。 此 时 需要 注意 的 是 地 址 栏 中 的 URL 信息 。 


Os. aingege/prgioare VB -OX)| Srmnnm CC ol 


@ 无 法 显示 该 网 页 


最 可 能 的 原因 是 : 
* 此 网 页 上 某 些 内 容 或 文件 所 需 的 程序 尚未 安装 。 


您 可 以 尝试 以 下 操作 : 
@ 联机 搜索 可 用 于 查看 此 Web 内 容 的 程序 - 
重新 键入 地 址 . 


时 返回 到 上 一 页 


图 9-18 保存 图 形 


9.9.3 ”绘制 图 形 综合 应 用 


绘制 商标 是 canvas 画布 的 用 途 之 一 ， 可 以 绘制 adidas 和 Nike 商标 。Nike 的 商标 比 adidas 
的 商标 复杂 的 多 ，adidas 都 是 由 直线 组 成 的 ， 而 Nike 的 多 了 曲线 。 实 现 本 实例 步骤 如 下 所 示 。 


to 册 分 析 需 求 。 要 绘制 两 条 曲线 ， 需 要 找到 曲线 的 参考 点 (参考 点 决定 了 曲线 的 曲率 ) ， 
这 需要 慢 慢 地 移动 ， 然 后 再 看 效果 ， 要 反复 试验 。quadraticCurveTo ( 30.79.99.78 ) 函数 有 两 
组 坐标 ， 第 一 组 坐标 为 控制 点 ， 决 定 曲线 的 曲率 ， 第 二 组 坐标 为 终点 。 

I02 构建 HTML， 实 现 canvas 画布 。 在 IE 9.0 中 浏览 效果 如 图 9-19 所 示 ， 此 时 只 显示 一 
个 画布 边框 ， 其 内 容 还 没有 绘制 。 其 代码 如 下 : 


<!DOCTYPE html> 
<html> 


国王 xffwchl77l9hml PCX| 全 ea >x| IE 


9-19 定义 画布 边框 


3) 用 JavaScript 实现 基本 图 形 : 在 IE 9.0 中 浏览 效果 如 图 9-20 所 示 ， 显 示 了 一 个 商标 
图 案 ， 其 代码 如 下 : 


10 
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context.strokeStyle="#d40000"; 


context.stroke(); 
// 恢 复原 有 绘图 状态 
context.restore(); 
} 
window.addEventListener("load",drawAdidas,true); 
</script> 
本 
C Cc jy 姑 | FA\ 源 文件 ch17\17.19.html 用 ”CX | 感 绘制 商标 x es 


图 9-20 绘制 的 商标 


9.10 ”综合 实例 一 一 绘制 火柴 棒 人 物 


动漫 人 物 。 使 用 canvas 和 JavaScript 同样 可 以 绘制 一 个 火柴 棒 人 物 。 有 具体 步骤 如 下 所 示 。 


iD 划 分 析 需 求 。 一 个 火柴 棒 人 ， 由 以 下 几 个 部 分 组 成 : 脸 部 ， 身 躯 。 脸 部 是 一 个 圆 形 ， 
中 包括 眼睛 和 跨 ; 身躯 由 几 条 直线 组 成 ， 包 括 手 和 腿 等 。 实 际 上 此 案例 就 是 绘制 圆 形 、 弧 度 
和 直线 的 组 合 。 实 例 完成 后 ， 效 果 如 图 9-21 所 示 。 


图 9-21 火柴 棒 人 物 
3 在 HIML 页 面 实现 定义 画布 canvas。 在 IE 9.0 中 浏览 效果 如 图 9-22 所 示 ， 页 面 中 显 


示 了 一 个 画布 边框 。 其 代码 如 下 


Ol rmanm p-cx|Ssmess ec 


图 9-22 定义 画布 边框 
to3j 实现 头 部 轮廓 绘制 ， 代 码 如 下 : 


t@ 毕 执行 程序 后 ， 将 会 产生 一 个 实心 的 、 填 充 的 头 部 ， 即 圆 形 。 在 arc 函数 中 ，x 和 y 的 
坐标 为 (100,50), 半径 为 30 像素 ， 另 两 个 参数 为 弧度 的 开始 和 结束 ， 第 六 个 参数 表示 绘制 弧 形 
的 方向 ， 即 顺 时 针 和 逆 时 针 方向 。 在 王 9.0 中 浏览 效果 如 图 9-23 所 示 ， 页 面 中 显示 了 一 个 实 
心 圆 ， 其 颜色 为 黑色 。 
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图 9-23 ”绘制 头 部 轮廓 
5 用 JavaScript 绘制 笑脸 ， 代 码 如 下 : 


cxt.beginPath(); 

cxt.strokeStyle='#c00'; 

cxt.lineWidth=3; 

cxtarc(100.50.20.0.Math_PLfalse); 

cxtstrokeO; 

to8j 此 处 使 用 beginPath 方法 ， 表 示 重 新 绘制 ， 并 设 定 线条 宽度 ， 然 后 绘制 弧 形 ， 从 嘴角 
开始 。 在 下 9.0 中 浏览 效果 如 图 9-24 所 示 ， 页 面 上 显示 了 一 个 漂亮 的 半圆 式 的 笑脸 。 


OS 站 R 源 文件 chl7V720html D = © XB sik 人 x Ca 


图 9-24 绘制 笑脸 
to 到 用 JavaScript 绘制 眼睛 : 首先 填充 弧 线 , 创建 了 一 个 实体 样式 的 眼睛 ，arc 绘制 左 眼 ， 
然后 使 用 moveto 绘制 右 眼 。 在 正 9.0 中 浏览 效果 如 图 9-25 所 示 ， 页 面 显 示 了 一 双眼 睛 。 其 代 
码 如 下 : 
cxtbeginPathO; 
cxt.fillStyle="#c00"; 
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cxt.arc(90,45,3,0,Math.PI*2,true): 
cxt.fill(); 

cxt.moveTo(113,45); 
cxt.arc(110,45,3,0,Math. PI*2,true): 
cxt.fill(); 

cxt.stroke(); 


[¢ 问 彼 | Fi\ 源 文 件 \ch17\17.20.html 训 - CX | 居 给 制 炎 闫 村 人 x | 二 E 汪 >; 


图 9-25 绘制 眼睛 


08j 绘制 身躯 ， 代 码 如 下 : 


cxt.moveTo(100,80); 
cxt.lineTo(100,150); 
cxt.moveTo(100,100), 
cxt.lineTo(60,120); 
cxt.moveTo(100,100); 
cxt.lineTo(140,120); 
cxt.moveTo(100,150); 
cxt.lineTo(80,190):; 
cxt.moveTo(100,150); 
cxt.lineTo(140,190); 
cxt.stroke(); 


上 面 代码 以 moveTo 作为 开始 坐标 ， 以 lineTo 为 终点 , 绘制 不 同 的 直线 , 这 些 直 线 的 坐标 
位 置 需 要 在 不 同 地 方 汇集 ， 两 只 手 在 坐标 (100.100) 以 上 交叉 ， 两 只 脚 在 坐标 (100,150) 处 交叉 。 

在 正 9.0 中 浏览 效果 如 图 9-21 所 示 ， 页 面 显示 了 一 个 火柴 棒 人 物 ， 相 比较 图 9-24， 多 了 
一 个 身躯 。 
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9.11 ”问题 解答 


1. 定义 canvas 宽度 和 高 度 时 ， 是 否 可 以 在 CSS 属性 中 定义 ? 
添加 canvas 标签 时 ， 会 在 canvas 属性 里 填写 要 初始 化 的 canvas 的 高 度 和 宽度 : 


<canvas width="500" height="400">Not Supported!</canvas> 


如 果 把 高 度 和 宽度 写 在 CSS 里 面 ,结果 发 现在 绘图 的 时 候 坐 标 获取 出 现 差异 , canvas.width 
和 canvas.height 分 别 是 300 和 150， 和 预期 的 不 一 样 。 这 是 因为 canvas 要 求 这 两 个 属性 必须 
canvas 和 标记 一 起 出 现 。 

2. 画布 中 Stroke 和 Fill 二 者 的 区 别 是 什么 ? 

HTML 5 中 将 图 形 分 为 两 大 类 : 第 一 类 称 作 Stroke， 就 是 轮廓 、 勾 勒 或 者 线条 ， 总 之 ， 图 
形 是 由 线条 组 成 的 ， 第 二 类 称 作 Fil， 就 是 填充 区 域 。 上 下 文 对 象 中 有 两 个 绘制 矩形 的 方法 ， 
可 以 让 程序 员 更 好 地 理解 这 两 大 类 图 形 的 区 别 : strokeRect 和 fillRect。 


< 
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目前 ， 在 网 页 上 没有 关于 音频 和 视频 的 标准 ， 多 数 音频 和 视频 都 是 通过 插件 来 播放 的 。 为 
此 ，HTML 5 新 增 了 音频 和 视频 的 标签 。 本 章 将 讲述 音频 和 视频 的 基本 概念 、 常 用 属性 、 解 码 
器 和 浏览 器 的 支持 情况 。 


10.1 audio 标签 


目前 ， 大 多 数 是 通过 插件 来 播放 音频 文件 的 ， 例 如 常见 的 播放 插件 为 Flash， 这 就 是 为 什 
么 用 户 在 用 浏览 器 播放 音乐 时 ， 常 常 需要 安装 Flash 插件 的 原因 。 但 是 ， 并 不 是 所 有 的 浏览 器 
都 拥有 同样 的 插件 。 

为 此 ， 和 HTML 4 相 比 ，HTML 5 新 增 了 audio 标签 ， 规 定 了 一 种 包含 音频 的 标准 方法 。 


10.1.1 audio 标签 概述 


audio 标签 是 定义 播放 声音 文件 或 者 音频 流 的 标准 。 支 持 三 种 音频 格式 , 分 别 为 Ogg、MP3 
和 Wav。 
如 果 需 要 在 HTML 5 网 页 中 播放 音频 ， 输 入 的 基本 格式 如 下 : 


<audio src="song.mp3" controls="controls"> 
</audio> 


【六 其 中 src 属性 是 规定 要 播放 的 音频 地 址 ，controls 属性 供 添 加 播放 、 暂 停 和 音量 控 
WE 件 用 的 。 
提 示 


另外 ， 在 <audio> 与 </audio> 之 间 插 入 的 内 容 是 供 不 支 持 audio 元 素 的 浏览 器 显示 的 。 
【 例 10.1】 《实例 文件 :chl0\10.1.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title>audio</title> 
<head> 
<body> 
<audio src="song.mp3" controls="controls"> 
您 的 浏览 器 不 支持 audio 标签 ! 
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如 果 用 户 的 浏览 器 是 正 9.0 以 前 的 版 本 ， 浏 览 效果 如 图 9-1 所 示 ， 可 见 正 9.0 以 前 的 版 
本 浏览 器 不 支持 audio 标签 。 

在 Firefox 8.0 中 浏览 效果 如 图 10-2 所 示 ， 可 以 看 到 加 载 的 音频 控制 条 和 听 到 加 载 的 音频 
文件 。 


FE 区 司 andio - 看 ozilla Firefox 回回 加 
CN [a mmouoinhn p - © x Gaudio 文件 外 ”编辑 E) 查看 WD 历史 GG) 书签 @) 工具 上 ) 
文件 (月 ” 蝙 锡 (E) ”各 看 (V) ”收藏 闪 (A) ”工具 (T) 帮助 (H) | audio 

您 的 浏览 器 不 支持 audio 标 签 ! | 


图 10-1 不 支持 audio 标签 的 效果 图 10-2 支持 audio 标签 的 效果 
10.1.2 audio 标签 的 属性 
Audio 标签 的 常见 属性 和 含义 如 下 表 所 示 。 
属性 值 描述 


Autoplay (自动 播放 ) | 如 果 出 现 该 属性 ， 则 音频 在 就 绪 后 会 马上 播放 
Controls (控制 ) 如 果 出 现 该 属性 ， 则 向 用 户 显 示 控 件 ， 比 如 播放 按钮 
i loop〔 循 环 ) 如 果 出 现 该 属性 ， 则 每 当 音 频 结束 时 将 重新 开始 播放 
和 如 果 出 现 该 属性 ， 则 音频 在 页 面 加 载 时 进行 加 载 ， 并 预备 播放 
如 果 使 用 autoplay， 则 忽略 该 属性 。 
url (地址 》 要 播放 的 音频 的 URL 地 址 
so Autobuffer ( 自动 缓 | 在 网 页 显示 时 ， 该 二 进 制 属性 表示 是 由 用 户 代理 (浏览 器 ) 自动 缓冲 
冲 ) 的 内 容 ， 还 是 由 用 户 使 用 相关 API 进行 内 容 缓冲 


另外 ，audio 标签 可 以 通过 source 属性 添加 多 个 音频 文件 ， 具 体格 式 如 下 : 


<audio controls="controls"> 

<source src="123.0gg" type="audio/ogg"> 
<source src="123.mp3" type="audio/mpeg"> 
</audio> 
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10.1.3 ”音频 解码 器 


音频 解码 器 定义 了 音频 数据 流 编 码 和 解码 的 算法 。 其 中 , 编码 器 主要 是 对 数据 流 进行 编码 
操作 ， 用 于 存储 和 传输 。 音 频 播放 器 主要 是 对 音频 文件 进行 解码 ， 然 后 进行 播放 操作 。 目 前 ， 
使 用 较 多 的 音频 解码 器 是 Vorbis 和 ACC。 


10.1.4 浏览 器 对 audio 标签 的 支持 情况 


目前 , 不 同 的 浏览 器 对 audio 标签 的 支持 也 不 同 。 下面 的 表格 中 列 出 应 用 最 为 广泛 的 浏览 
器 对 audio 标签 的 支持 情况 。 


浏览 器 | Firefox 3.5 及 | IE 9.0 及 更 高 | Opera 10.5 及 | Chrome 3.0 及 | Safari 3.0 及 更 
音频 格式 更 高 版 本 版 本 更 高 版 本 更 高 版 本 高 版 本 


10.2 video 标签 


和 音频 文件 播放 方式 一 样 , 大 多 数 视频 文件 在 网 页 上 也 是 通过 插件 来 播放 的 , 例如 常见 的 
播放 插件 为 Flash。 由 于 不 是 所 有 的 浏览 器 都 拥有 同样 的 插件 ， 所 以 就 需要 一 种 统一 的 包含 视 
频 的 标准 方法 。 为 此 ， 和 HTML 4 相 比 ，HTML 5 新 增 了 video 标签 。 


10.2.1 video 标签 概述 


video 标签 主要 是 定义 播放 视频 文件 或 者 视频 流 的 标准 。 支持 3 种 视频 格式 , 分 别 为 Ogg、 
WebM 和 MPEG 4。 
如 果 需 要 在 HTML 5 网 页 中 播放 视频 ， 输 入 的 基本 格式 如 下 : 


<video src="123.mp4" controls="controls"> 
</ video > 


另外 ， 在 < video > 与 </ video > 之 间 插 入 的 内 容 是 供 不 支 持 video 元 素 的 浏览 器 显示 的 。 
【 例 10.2】〔 实 例文 件 : ch10\10.2.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title>video</title> 

<head> 

<body > 

<video src="123.mp4" controls="controls"> 
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您 的 浏览 器 不 支持 video 标签 ! 
</ video > 

</body> 

</html> 


如 果 用 户 的 浏览 器 是 下 9.0 以 前 的 版 本 ,浏览 效果 如 图 10-3 所 示 , 可 见 下 9.0 以 前 的 浏 


览 器 不 支持 video 标签 。 


[ee 


ja chiou02hm P - © x||@ video 


文件 (月 ” 编 强 (E) ”前 看 (V) ”收藏 夫 (A) ”工具 (T) ”帮助 (H) 


您 的 浏览 器 不 支持 video 标 签 ! 


图 10-3 不 支持 video 标签 的 效果 


在 Firefox 8.0 中 浏览 效果 如 图 10-4 所 示 ， 可 以 看 到 加 载 的 视频 控制 条 界面 。 单 击 “ 播 放 ” 


按钮 ， 即 可 查看 视频 的 内 容 。 


video - orilla Firefox 
文件 中 ”编辑 各 查看 WD 历史 GE) 书签 @) 工具 CD 帮助 人 0 
+ 
l 


图 10-4 支持 video 标签 的 效果 


10.2.2 ”video 标签 的 属性 


video 标签 的 常见 属性 和 含义 如 下 表 所 示 。 


精通 HTJL 5 网 页 设计 


属性 值 描述 
autoplay autoplay 如 果 出 现 该 属性 ， 则 视频 在 就 绪 后 会 马上 播放 
controls 如 果 出 现 该 属性 ， 则 向 用 户 显示 控件 ， 比 如 播放 按钮 
loop 如 果 出 现 该 属性 ， 则 每 当 视 频 结束 时 将 重新 开始 播放 
controls 如 果 出 现 该 属性 ， 则 视频 在 页 面 加 载 时 进行 加 载 ， 并 预备 播放 ; 
we 如 果 使 用 autoplay， 则 忽略 该 属性 
Url 要 播放 视频 的 URL 
width 宽度 值 设置 视频 播放 器 的 宽度 
height 高 度 设置 视频 播放 器 
当 视 频 未 响应 或 缓冲 不 足 时 ， 该 属性 值 链接 到 一 个 图 像 。 该 图 像 将 以 一 定 比 例 
poster url & 
被 显示 出 来 
由 上 表 可 知 , 用 户 可 以 自 定义 视频 文件 显示 的 大 小 。 例如 想 让 视频 以 320X240 像素 显示 ， 
可 以 加 入 winth 和 height 属性 。 具 体格 式 如 下 : 


<video width="320" height="240" controls src="123.mp4" > 
</video> 


另外 ，video 标签 可 以 通过 source 属性 添加 多 个 视频 文件 ， 具 体格 式 如 下 ; 


<video controls="controls"> 

<source src="123.0gg" type="video/ogg"> 
<source src="123.mp4" type="video/mp4"> 
</ video > 


10.2.3 视频 解码 器 


视频 解码 器 定义 了 视频 数据 流 编 码 和 解码 的 算法 。 其 中 , 编码 器 主要 是 对 数据 流 进 行 编码 
操作 ， 用 于 存储 和 传输 。 视 频 播 放 器 主要 是 对 视频 文件 进行 解码 ， 然 后 进行 播放 操作 。 
目前 ， 在 HTML 5 中 ， 使 用 比较 多 的 视频 解码 文件 是 Theora、H.264 和 VP8。 


10.2.4 浏览 器 对 video 标签 的 支持 情况 


目前 , 不 同 的 浏览 器 对 video 标签 支持 也 不 同 。 下面 的 表格 中 列 出 应 用 最 为 广泛 的 浏览 器 
对 video 标签 的 支持 情况 。 


浏览 器 | Firefox 4.0 及 | IE 9.0 及 更 高 | Opera 10.6 及 “| chrome 6.0 及 更 | Safari 3.0 及 更 高 


视频 格式 版 本 更 高 版 本 高 版 本 版 本 
Ogg 支持 支持 
MPEG 4 | 支持 支持 支持 
WebM | 支持 支持 
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10.3 ”问题 解答 


1. 在 HTML 5 网 页 中 添加 所 支持 格式 的 视频 ， 不 能 在 Firefox 8.0 浏览 器 中 正常 播放 ， 为 
什么 ? 

目前 ，HTML 5 的 video 标签 对 视频 的 支持 ， 不 仅仅 有 视频 格式 的 限制 ， 还 有 对 解码 器 的 
限制 。 规 定 如 下 : 


@ 如 果 视 频 是 ogg 格式 的 文件 ， 则 需要 带 有 Thedora 视频 编码 和 Vorbis 音频 编码 的 视 
频 软 件 。 

@ 如 果 视 频 是 MPEG4 格式 的 文件 , 则 需要 带 有 HH.264 视频 编码 和 AAC 音频 编码 的 播 
放 软 件 视频 。 

@ 如 果 是 视频 是 WebM 格式 的 文件 , 则 需要 带 有 VP8 视频 编码 和 Vorbis 音频 编码 的 播 
放 软 件 视频 。 


2. 在 HTML 5 网 页 中 添加 MP4 格式 的 视频 文件 , 为 什么 在 不 同 的 浏览 器 中 视频 控件 显示 
的 外 观 不 同 ? 

在 HIML 5 中 规定 controls 属性 用 来 控制 视频 文件 的 播放 、 暂 停 、 停 止 和 调节 音量 的 操作 。 
Controls 是 一 个 布尔 属性 ,一 旦 添加 了 此 属性 ， 等 于 告诉 浏览 器 需要 显示 播放 控件 并 允许 用 户 
操作 。 
因为 每 一 个 浏览 器 负责 内 置 视频 控件 的 外 观 , 所 以 在 不 同 的 浏览 器 中 将 显示 不 同 的 视频 控 
件 外 观 。 


根据 访问 者 访问 网 站 的 方式 ， 有 多 种 获取 地 理 位 置 的 方法 ， 本 章 主要 介绍 如 何 利 / 
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Geolocation API 来 获取 地 理 位 置 。 


11.1 用 Geolocation API 获取 地 理 位 置 


在 HIML 5 网 页 代码 中 ， 通 过 一 些 有 用 的 API， 可 以 查找 访问 者 当前 的 位 置 。 


hls 


地 理 定 位 的 原理 


由 于 访问 者 浏览 网 站 的 方式 不 同 ， 可 以 通过 下 列 方式 确定 其 位 置 。 


如 果 网 站 浏览 者 使 用 计算 机 上 网 ， 可 通过 获取 浏览 者 的 IP 地 址 确定 其 具体 位 置 。 
如 果 网 站 浏览 者 通过 手机 上 网 ， 可 通过 获取 浏览 者 的 手机 信号 的 接收 塔 确定 其 具体 位 置 。 
如 果 网 站 浏览 者 的 设备 上 具有 GPS 硬件 ， 通 过 获取 GPS 发 出 的 载波 信号 获取 其 具体 


位 置 。 


如 果 网 站 浏览 者 通过 无 线 上 网 ， 可 以 通过 无 线 网 络 连 接 获取 其 具体 位 置 。 


API 是 应 用 程序 的 编程 接口 ， 是 一 些 预 先 定义 的 函数 ， 目 的 是 提供 应 用 程序 与 开 
发 人 员 基 于 某 软件 或 硬件 的 以 访问 一 组 例 程 的 能 力 ， 而 又 无 需 访问 源码 ， 或 理解 


提 示 内 部 工作 机 制 的 细节 。 


11.1.2 ”获取 定位 信息 的 方法 


在 了 解 了 地 理 定位 的 原理 后 , 下面 介绍 获取 定位 信息 的 方法 ,根据 访问 者 访问 网 站 的 方式 ， 
可 以 通过 下 列 方法 之 一 确定 地 理 位置 。 


利用 IP 地 址 定位 。 

利用 GPS 功能 定位 。 

利用 Wi- 丰 定位。 

利用 Wi-fi 和 GPRS 联合 定位 。 
利用 用 户 自 定 义 定位 数据 定位 。 


使 用 上 述 的 哪 种 方法 将 取决 于 浏览 器 和 设备 的 功能 , 然后 , 浏览 器 将 确定 其 位 置 并 传输 回 
地 理 位 置 , 但 需要 注意 的 是 无 法 保证 返回 的 位 置 是 设备 的 实际 地 理 位 置 。 因 为 , 这 涉及 到 隐私 
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问题 ， 并 不 是 每 个 人 都 想 共享 他 的 位 置 。 
11.1.3 ”常用 地 理 定位 方法 


通过 地 理 定位 ， 可 以 确定 用 户 的 当前 位 置 ,并 能 获取 用 户 地 理 位 置 的 变化 情况 。 其 中 ,最 
的 就 是 API 中 的 getCurrentpositong 方法 。 
getCurrentpositong 方法 的 语法 格式 如 下 : 


Void getCurrentPosition(successCallback, errorCallback, options); 


E23 


其 中 successCallback 参数 是 指 在 成 功 获取 位 置 时 用 户 想 要 调用 的 函数 名 称 ，errorCallback 参 
数 是 指 在 位 置 获 取 失 败 时 用 户 想 要 调用 的 函数 名 称 ，options 参数 指出 地 理 定位 时 的 属性 设置 。 


(7 同时 出 于 隐私 问题 ， 还 要 取得 用 户 的 同意 。 
提 示 


如 果 地 理 定位 成 功 ， 新 的 Position 对 象 将 调用 displayOnMap 函数 ， 显 示 设 备 的 当前 位 置 。 

那么 Positon 对 象 的 含义 是 什么 ? 作为 地 理 定位 的 API，Positon 对 象 包含 位 置 确定 时 的 时 
间 玲 〈timestamp ) 和 包含 位 置 的 坐标 〈coords) ， 有 具体 语法 格式 如 下 : 

Interface position 

所 

Teadonly attribute Coordinates cords; 

readonly attribute DOMTimeStamp timestamp; 

js 


11.1.4 如 何 判断 浏览 器 是 否 支 持 HTML 5 获取 地 理 位 置信 息 

在 用 户 试图 使 用 地 理 定 位 之 前 ， 应 该 先 确保 浏览 器 是 否 支 持 HTML 5 获取 地 理 位 置信 息 。 
这 里 介绍 判断 的 方法 。 具 体 的 代码 如 下 : 

function inmit() 

if (navigator.geolocation) { 

/获取 当前 地 理 位 置信 息 

navigator.geolocation.getCurrentPosition(onSuccess, onError, options); 

} else { 

alert(" 你 的 浏览 器 不 支持 html 5 来 获取 地 理 位 置信 息 。"); 

} 

下 面 解释 该 代码 中 文 函数 的 含义 。 

1. onSuccess 


该 函数 是 获取 当前 位 置信 息 成 功 时 执行 的 回调 函数 。 
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在 onSuccess 回调 函数 中 ， 用 到 了 参数 position， 代 表 一 个 具体 的 position 对 象 ， 表 示 当 前 
位 置 。 其 具有 如 下 属性 。 


latitude: 当前 地 理 位 置 的 纬度 。 

longitude: 当前 地 理 位 置 的 经 度 。 

altitude: 当前 位 置 的 海拔 高 度 (不 能 获取 时 为 null )。 

accuracy: 获取 到 的 纬度 和 经 度 的 精度 (以 米 为 单位 )。 

altitudeAccurancy: 获取 到 的 海拔 高 度 的 经 度 (以 米 为 单位 )。 

heading: 设备 的 前 进 方向 。 以 前 进 的 方向 为 正方 向 顺 时 针 旋 转角 度 来 表示 ( 不 能 获取 
时 为 null )。 

speed: 设备 的 前 进 速 度 ( 以 m/s 为 单位 ， 不 能 获取 时 为 null )。 

timestamp: 获取 地 理 位 置信 息 时 的 时 间 。 


和 
全 
2. onError 
该 函数 是 获取 当前 位 置信 息 失败 时 所 执行 的 回调 函数 。 
在 onError 回调 函数 中 ， 用 到 了 error 参数 ， 其 具有 如 下 属性 。 
@ code: 错误 代码 ， 有 如 下 值 。 
> 用 户 拒 绝 了 位 置 服务 (属性 值 为 1); 
> 获取 不 到 位 置信 息 ( 属性 值 为 2) ; 
> 获取 信息 超时 错误 ( 属性 值 为 3) 。 
®@ message: 字符 串 ， 包 含 了 具体 的 错误 信息 。 
3. options 
options 是 一 些 可 选 熟悉 列表 。 在 options 参数 中 ， 可 选 属性 如 下 。 
@ enableHighAccuracy: 是 否 要 求 高 精度 的 地 理 位 置信 息 。 
@ timeout: 设置 超时 时 间 (单位 为 ms )。 
@ _ maximumAge: 对 地 理 位 置信 息 进行 缓存 的 有 效 时 间 (单位 为 ms )。 
11.1.5 指定 纬度 和 经 度 坐标 
对 于 地 理 定位 成 功 后 ， 将 调用 displayOnMap 函数 。 此 函数 如 下 : 


function displayOnMap(position) 

{ 

var latitude=positon.coords.latitude: 
var longitude=postion.coords.longitude: 
} 


其 中 第 一 行 函 数 从 position 对 象 获取 coordinates 对 象 , 主要 由 API 传递 给 程序 调用 。 第 三 
行 和 第 四 行 中 定义 了 两 个 变量 ，latitude 和 longitude 属性 存储 在 定义 的 两 个 变量 中 。 
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为 了 在 地 图 上 显示 用 户 的 具体 位 置 , 可 以 利用 地 图 网 站 的 API。 下 面 以 使 用 百度 地 图 为 例 
进行 讲解 ， 需 要 使 用 Baidu Maps JavaScript API。 在 使 用 此 API 前 ， 需 要 在 HTML 5 页 面 中 添 
加 一 个 引用 ， 具 体 代码 如 下 : 

<--baidu maps API> 

<script type= “ text/JavaScript” scr= “http://api.map.baidu.com/api?key=*&v=1.0&services=true” > 

</script> 

其 中 代 “*” 号 的 代码 作用 是 注册 到 key。 注册 key 的 方法 为 : 在 “http: //openapi.baidu.com/ 
map/index.html” 网 页 中 ,注册 百 度 地 图 API， 然 后 输入 需要 内 署 百 度 地 图 页 面 的 URL 地 址 ， 
生成 API 密 钥 ， 然 后 将 key 文件 复制 保存 。 

虽然 已 经 包含 了 Baidu Maps JavaScript， 但 是 页 面 中 还 不 能 显示 内 置 的 百度 地 图 ， 还 需要 
添加 HTML 语言 ， 然 后 地 图 从 程序 转化 为 对 象 。 还 需要 加 入 以 下 源 代码 : 


<script type="“text/JavaScript”scr="“http://api.map.baidu.com/api?key=*&v=]1.0&services=true”> 
</script> 

<div style="width:600px;height:220px;border: 1px solid gary:margin-top:15px:" id="container"> 
</div> 

<script type="text/JavaScript"> 

var map = new BMap.Map("container"); 

map.centerAndZoom(new BMap.Point(***,***), 17); 

map.addControl(new BMap.NavigationControl0): 

map.addControl(new BMap.ScaleControl()): 

map.addControl(new BMap.OverviewMapControl()); 

var local = new BMap.LocalSearch(map, 

{ 

enderOptions: {map: map} 

} 

六 

local.search(" 输 入 搜索 地 址 "); 

</script> 


上 述 代 码 分 析 如 下 : 
(1) 其 中 前 2 行 主要 是 把 baidu map API 程序 植 入 源码 中 。 
(2) 第 3 行 在 页 面 中 设置 一 个 标签 ， 包括 宽度 和 长 度 ， 用户 可 以 自己 调整 ，border=1lpx 是 定 
义 外 框 的 宽度 为 1 像素 ，solid 为 实 线 ，gray 为 边框 显示 颜色 ，margin-top 为 该 标签 的 上 外 边 距 。 
(3) 第 7 行为 在 地 图 中 自己 位 置 的 坐标 。 
(4) 第 8 行 ~ 第 10 行为 植 入 地 图 缩放 控制 工具 。 
(5) 第 11 行 ~ 第 16 行为 地 图 中 自己 的 位 置 ， 只 需 在 local search 后 填 入 自己 的 位 置 名 称 
即 可 。 
【 例 11.1】“〈 实 例文 件 ， ch11\11.1.html) 
如 下 代码 为 使 用 纬度 和 经 度 定位 坐标 的 案例 。 
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to 划 打开 记事 本 文件 ， 在 其 中 输入 如 下 代码 : 


<!DOCTYPE html> 
<html> 
<head> 
<title> 纬 度 和 经 度 坐 标 </title> 
<style> 
body {background-color:#fff:} 
</style> 
</head> 
<body> 
<p id="geo loc"><p> 
<script> 
function getElem(id) { 
Tetum typeof id —= 'string' ? document.getElementById(id) : id; 
; 


function show it(lat, lon) { 
var str = ' 您 当前 的 位 置 ， 纬 度 : '+lat+'， 经 度 : '+ lon; 
getElem('geo_loc).innerHITML = str; 
} 
if (navigator.geolocation) { 
navigator.geolocation.getCurrentPosition(function(position) { 
show_it(position.coords.latitude, position.coords.longitude): 
站 
function(err) { 
getElem('geo_loc').innerHTML = err.code + "|" + err.message; 
D; 
}else { 
getElem('geo_loc').innerHTML = "您 当前 使 用 的 浏览 器 不 支持 Geolocation 服务 "; 
} 
</script> 
</body> 
</html> 


I02 使 用 Opera 浏览 器 打开 网 页 文件 ， 由 于 使 用 HIML 定位 功能 首先 要 由 用 户 允 许 位 置 


共享 才 可 获取 地 理 位 置信 息 ， 所 以 弹出 如 下 图 所 示 提 示 框 ， 选 择 “ 总 是 允许 ”， 单 击 “确定 ” 


按钮 ， 如 
03， 


并 单 击 “ 


图 11-1 所 示 。 
在 弹出 的 地 理 位 置 共 享 条 款 对 话 框 中 勾 选 “接受 条 款 和 条 件 并 启用 地 理 位 置 ”选项 ， 


接受 ”按钮 ， 如 图 11-2 所 示 。 


图 11-1 程序 运行 结果 


The Opera browser is attempting to access your location using Google's 
location service The service, provided by Google adds location capabllty 
to applications while using the Opera browser 


By clcking agree below, you agree to Googles Terms of Servce and to the 
collection use, sharing and onward transfer of your location data in 
accordance with Google's Privacy Pollcy 


Leam more 


图 11-2 程序 运行 结果 


to 约 在 页 面 中 显示 了 当前 页 面 打开 时 所 处 的 地 理 位 置 ,其 位 置 为 使 用 者 的 卫 或 GPS 定位 
地 址 ， 如 图 11-3 所 示 。 
Wom] 


Ohapynmoperace- x 四 sl 
生字 司 09- | 9 国志 地 | localhosyHyUsers// 容 |[ 国 ~ ecoce | 


您 当前 的 位 置 ， 纬 度 ，34. 7466， 经 度 ，113. 625368 


图 11-3 程序 运行 结果 
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C7 每 次 使 用 浏览 器 打开 网 页 时 都 会 提醒 是 否 允许 地 理 位 置 共 享 ， 为 了 安全 ， 用 户 应 
当 受 善 使 用 地 址 共享 功能 。 


11.2 ”浏览 器 对 地 理 定 位 的 支持 情况 


支持 情况 。 


浏览 器 名 称 
EE 
Firefox Firefox 3.5 及 更 高 版 本 

ue 
Chrome 
Android 


11.3 综合 实例 一 一 在 网 页 中 调用 Google 地 图 


本 实例 介绍 如 何在 网 页 中 调用 Google 地 图 ， 以 获取 当前 设备 物理 地 址 的 经 度 与 纬度 。 具 
体 的 操作 步骤 如 下 : 


4 调用 Google Map， 其 代码 如 下 : 


<!DOCTYPE html> 

<head> 

<title> 获 取 当 前 位 置 并 显示 在 google 地 图 上 </title> 

<script type="text/JavaScript" sre="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/JavaScript"> 


W023 获取 当前 地 理 位 置 ， 其 代码 如 下 : 


navigator.geolocation.getCurrentPosition(function (position) { 
Var coords = position.coords; 
//console.log(position); 


gj 设 定 地 图 参数 ， 其 代码 如 下 : 


Var latlng = new google.maps.LatLng(coords.latitude, coords.longitude):; 
Var myOptions = { 

zoom: 14, // 设 定 放大 倍数 

center: latIng, // 将 地 图 中 心 点 设 定 为 指定 的 坐标 点 

mapTypeld: google.maps.MapTypeId.ROADMAP // 指 定 地 图 类 型 
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三 
9 级 创建 地 图 ， 并 在 页 面 中 显示 ， 其 代码 如 下 : 


var map = new google.maps.Map(document.getElementById("map"), myOptions); 
3 在 地 图 上 创建 标记 ， 其 代码 如 下 : 


Var marker = new google.maps.Marker({ 
position: latlng, // 将 前 面 设 定 的 坐标 标注 出 来 
map: map // 将 该 标注 设置 在 刚才 创建 的 map 中 
六; 


i086] 创建 窗 体内 的 提示 内 容 ， 其 代码 如 下 : 


var infoWindow = new google.maps.InfoWindow({ 
content: "当前 位 置 ，<br/> 经 度 :" + lating.lat() +"<br/> 纬 度 :" + lating.lng0 // 提 示 窗 体内 的 提示 信息 
D; 


I0 权 打开 提示 窗口 ， 其 代码 如 下 : 


infoWindow.open(map, marker); 
} 


I08) 根据 需要 再 编写 其 他 相关 代码 ， 如 处 理 错误 的 方法 和 打开 地 图 的 大 小 等 。 查 看 此 时 
页 面相 应 的 HTML 源 代码 如 下 : 


<!DOCTYPE html> 

<head> 

<title> 获 取 当 前 位 置 并 显示 在 google 地 图 上 </title> 

<script type="text/JavaScript" sre="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/JavaScript"> 

function initO { 

if (navigator.geolocation) { 

/获取 当前 地 理 位 置 

navigator.geolocation.getCurrentPosition(function (position) { 

Var coords = position.coords: 

//console.log(position); 

/指定 一 个 Google 地 图 上 的 坐标 点 ， 同 时 指定 该 坐标 点 的 横 坐 标 和 纵 坐 标 
var latlng = new google.maps.LatLng(coords.latitude, coords.longitude); 

var myOptions = { 

zoom: 14, // 设 定 放大 倍数 

center: lating, // 将 地 图 中 心 点 设 定 为 指定 的 坐标 点 

mapTypeld: google maps.MapTypeIdROADMAP // 指 定 地 图 类 型 


5 
// 创 建 地 图 ， 并 在 页 面 map 中 显示 
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Var map = new google.maps.Map(document.getElementById("map"), myOptions): 
// 在 地 图 上 创建 标记 

var marker = new google.maps.Marker({ 

position: latlng, // 将 前 面 设 定 的 坐标 标注 出 来 

map: map // 将 该 标注 设置 在 刚才 创建 的 map 中 

D; 

/标注 提示 窗口 

var infoWindow = new google.maps.InfoWindow({ 
content: "当前 位 置 ，<br/> 经 度 :" + latlng.lat0 + "<br/> 维 度 :" + lating.Ing0 // 提 示 窗 体内 的 提示 信息 
D); 

/打开 提示 窗口 

infoWindow.open(map, marker): 

} 

function (error) { 

// 处 理 错 误 

switch (error.code) { 

case 1: 

alert(" 位 置 服务 被 拒绝 。"); 

break: 

case 2: 

alert(" 暂 时 获取 不 到 位 置信 息 。"); 

break: 

Case 3: 

alert(" 获 取信 息 超 时 。"); 

break: 

default: 

alert(" 未 知 错误 。"); 

break; 

b 

D; 

}else{ 

alert(" 你 的 浏览 器 不 支持 HIML 5 来 获取 地 理 位 置信 息 。"); 
> 

} 

</script> 

</head> 

<body onload="initO"> 

<div id="map" style="width: 800px: height: 600px"></div> 
</body> 

</html> 


09j 保存 网 页 后 ， 即 可 查看 最 终 效 果 ， 如 图 11-4 所 示 。 
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图 11-4 程序 运行 结果 
11.4 ”问题 解答 


1. 使 用 HTML 5 Geolocation API 获得 的 用 户 地 理 位 置 一 定 精准 吗 ? 
不 一 定 精 准 ， 因 为 该 特性 可 能 侵犯 用 户 的 隐私 ,除非 用 户 同意 ， 和 否则 用 户 位 置信 息 是 不 可 


用 的 。 
2. 地 理 位 置 API 可 以 在 国际 空间 站 上 使 用 吗 ? 可 以 在 月 球 上 或 者 其 他 星球 上 用 吗 ? 

地 理 位 置 标准 是 这 样 阐述 的 : “地 理 坐 标 参考 系 的 属性 值 来 自 大 地 测量 系统 (World 
Geodetic System (2d) [WGS84]) 。 不 支持 其 他 参考 系 。” 国 际 空间 站 位 于 地 球 轨道 上 ， 所 以 
宇航 员 可 以 使 用 经 纬度 和 海拔 来 描述 其 位 置 。 但 是 ,大 地 测量 系统 是 以 地 球 为 中 心 的 , 因此 也 
就 不 能 使 用 这 个 系统 来 描述 月 球 或 者 其 他 星球 的 位 置 了 。 
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本 章 主要 学 习 Web 通信 新 技术 。 其 中 包括 跨 文档 消息 传输 的 实现 和 Web Sockets 实时 通 
信和 技术 ,通过 本 章 的 学 习 ， 可 以 更 好 地 完成 跨 域 数 据 的 通信 ， 以 及 Web 即时 通信 应 用 的 实现 ， 
如 Web QQ 等 。 


12.1 ” 跨 文档 消息 传输 


利用 跨 文档 消息 传输 功能 ， 可 以 在 不 同 域 、 端 口 或 网 页 文档 之 间 进 行 消息 的 传递 。 
12.1.1 ” 跨 文档 消息 传输 的 基本 知识 


利用 跨 文档 消息 传输 可 以 实现 跨 域 的 数据 推动 ， 使 服务 器 端 不 再 被 动 地 等 待 客户 端的 请 
求 ， 只 要 客户 端 与 服务 器 端 建立 了 一 次 连接 后 ,服务器 端 就 可 以 在 需要 的 时 候 ， 主动 地 将 数据 
推送 到 客户 端 ， 直 到 客户 端 显 示 关 闭 这 个 连接 。 

HTML 5 提供 了 在 网 页 文档 之 间 互 相 接收 与 发 送 消息 的 功能 。 使 用 这 个 功能 ， 只 要 获取 到 
网 页 所 在 页 面 对 象 的 实例 , 不 仅 同 域 的 Web 网 页 之 间 可 以 互相 通信 ， 甚 至 可 以 实现 跨 域 通信 。 

想 要 接收 从 其 他 的 文档 那里 发 过 来 的 消息 ， 就 必须 对 文档 对 象 的 message 时 间 进 行 监视 ， 
实现 代码 如 下 : 


window.addEventListener(“message”, function(|{...}, false)。 


想 要 发 送 消 息 ， 可 以 使 用 window 对 象 的 postMessage 方法 来 实现 ， 该 方法 的 实现 代码 如 


otherWindow.postMessage(message，targetOrigin)。 


说 明 : postMessage 是 HIML 5 为 了 解决 跨 文档 通信 ， 特 别 引入 的 一 个 新 的 API， 目 前 支 
持 这 个 API 的 浏览 器 有 : IE (8.0 以 上 ) 、Firefox、Opera、Safari 和 Chrome。 

postMessage 允许 页 面 中 的 多 个 这 ame/window 的 通信 ，postMessage 也 可 以 实现 ajax 直接 
跨 域 通信 ， 不 通过 服务 器 端 代 理 。 


12.1.2 ” 跨 文档 通信 应 用 测试 


下 面 来 介绍 一 个 跨 文档 通讯 的 应 用 案例 ,其 中 主要 使 用 postMessage 的 方法 来 实现 该 案例 。 
具体 操作 方法 如 下 : 
需要 创建 两 个 文档 来 实现 跨 文档 的 访问 ， 名 称 分 别 为 12.1.html 和 12.2.html。 
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Wi 打开 记事 本 文件 , 在 其 中 输入 以 下 代码 ， 以 创建 用 于 实现 信息 发 送 的 12.1.html 文档 ， 
具体 代码 如 下 : 


<!DOCTYPE HIML> 
<html> 
<head> 
<title> 跨 域 文档 通信 1</title> 
<meta charset="utf-8"/> 
</head> 
<script type="text/JavaScript"> 
window.onload = function|) { 
document.getElementById('title').innerHTML = ' 页 面 在 ' + documentlocation host + ' 域 中 ， 是 每 过 1 秒 
向 12.2.html 文档 发 送 一 个 消息 ! 
/定时 向 另外 一 个 不 确定 域 的 文件 发 送 消息 
setInterval(function(){ 
var message = ' 消 息 发 送 测试 ! &nbsp;&nbsp; '+ (new DateO.getTimeO); 
window.parent.frames[0].postMessage(message, *"); 
},1000); 
$B 
</script> 
<body> 
<div id="title"></div> 
</body> 
</html> 


t@3 保存 记事 本 文件 ， 然 后 使 用 浏览 器 打开 该 文件 ， 最 终 的 效果 如 图 12-1 所 示 。 


a hu:erewdminst p - o x | 
文件 (站 多 名 得 看 收 基 AA】 工具 (T)】 攻 助 (H) 
页 面 在 域 中 ， 且 每 过 1 秒 向 12. 2. html 文 档 发 送 一 
个 消息 ! 


图 12-1 程序 运行 结果 


t@3j 打开 记事 本 文件 , 在 其 中 输入 以 下 代码 , 以 创建 用 于 实现 信息 监听 的 12.2.html 文档 ， 
具体 代码 如 下 : 
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<!DOCTYPE HIML> 
<html> 
<head> 
<title> 跨 域 文档 通信 2</title> 
<meta charset="utf-8"/> 
</head> 
<script type="text/JavaScript"> 
window.onload = fonction() { 
Var onmessage = function(e) { 
Var data = e.data,p = document.createElement('p"); 
Pp-innerHTML = data; 
document.getElementById(display).appendChild(p): 
a 
/监听 postMessage 消息 事件 
if (typeof window.addEventListener != undefined) { 
window.addEventListener('message', onmessage, false); 
} else if (typeof window.attachEvent != "undefined) { 
window.attachEvent(onmessage' onmessage); 


}; 
</script> 
<body> 
<div id="display"></div> 
</body> 
</html> 


运行 效果 如 图 12-2 所 示 。 


e =-JEeE 
Ca S) 国 HNUserswdminist 了 -C X | 丰 叶 过 文科 和信 
文件 (有 注 者 (查看 (V)” 收 节 闪 (A) 工具 (T) 部 动 (H) 
页 面 在 域 中 ， 且 每 过 1 秒 向 12. 1. html 文 档 发 送 一 个 消 


图 12-2 程序 运行 结果 


在 12.1.html 文件 中 的 “window.parent.frames[0].postMessage (message, *') ;” 语 句 中 的 “*” 
号 表示 不 对 访问 的 域 进行 判断 。 如 果 要 加 入 特定 域 的 限制 ， 可 以 将 代码 改 为 “window.parent. 
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frames[0].postMessage (message, "url') :” 其 中 的 url 必须 为 完整 的 网 站 域名 格式 。 而 在 信息 监 
上 听 接 收 方 的 onmessage 中 需要 追加 一 个 判断 语句 “if (event.origin ! 一 mr') return:”。 


0@! 由 于 在 实际 通信 时 ， 应 当 实 现 双 向 的 通信 ， 所 以 ， 在 编写 代码 时 ， 每 一 个 文档 中 
提示 都 应 该 具有 发 送信 息 和 监听 接收 信息 的 模块 。 
外 


12.2 Web Sockets API 


HTML 5 中 有 一 个 很 实用 的 新 特性 : WebSockets。 使 用 WebSockets 可 以 在 没 Ajax 请 求 的 
情况 下 与 服务 器 端 对 话 。 


12.2.1 什么 是 WebSocket API 


WebSocket API 是 下 一 代 客 户 端 -服务 器 的 异步 通信 方法 。 该 通信 取代 了 单个 的 TCP 套 接 
字 ， 使 用 ws 或 wss 协议 ， 可 用 于 任意 的 客户 端 和 服务 器 程序 。WebSocket 目前 由 W3C 进行 
标准 化 。WebSocket 已 经 受到 Firefox 4、Chrome 4、Opera 10.70 以 及 Safari 5 等 浏览 器 的 支持 。 

WebSocket API 设计 的 最 好 之 处 在 于 服务 器 和 客户 端 可 以 在 给 定时 间 范 围 内 的 任意 时 刻 ， 
相互 推送 信息 。WebSocket 并 不 限于 以 Ajax (或 XHR) 方式 通信 ， 因 为 Ajax 技术 需要 由 客户 
端 发 起 请 求 ， 而 WebSocket 服务 器 和 客户 端 可 以 彼此 相互 推送 信息 ，XHR 受到 域 的 限制 ， 而 
WebSocket 允许 跨 域 通信 。 

Ajax 技术 的 一 点 是 没有 设计 要 使 用 的 方式 。WebSocket 为 指定 目标 创建 ， 用 于 双向 推送 
消息 。 
12.2.2 ”Web Sockets 通信 基础 

1. 产生 Web Sockets 的 背景 


随 之 即时 通信 系统 的 普及 ， 基 于 Web 的 实时 通信 也 变 得 普及 ， 如 新 浪 微 博 的 评论 、 私 信 
的 通知 ， 腾 讯 的 web QQ 等 ， 如 图 12-3 所 示 。 


图 12-3 腾讯 Web QQ 页 面 
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在 Web Socket 出 现 之 前 ， 一 般 通 过 两 种 方式 来 实现 Web 实时 应 用 : 轮 询 机 制 和 流 技术 ， 
而 其 中 的 轮 询 机 制 又 可 分 为 普通 轮 询 和 长 轮 询 《Coment) ， 分 别 介绍 如 下 : 


@ 轮 询 : 这 是 最 早 的 一 种 实现 实时 Web 应 用 的 方案 。 客户 端 以 一 定 的 时 间 间 隔 向 服务 端 
发 出 请 求 ， 以 频繁 请 求 的 方式 来 保持 客户 端 和 服务 器 端的 同步 。 这 种 同步 方案 的 缺点 
是 ， 当 客户 端 以 固定 频率 向 服务 器 发 起 请 求 的 时 候 , 服务 器 端的 数据 可 能 并 没有 更 新 ， 
这 样 会 带 来 很 多 无 谓 的 网 络 传输 ， 所 以 这 是 一 种 非常 低 效 的 实时 方案 。 

@ 长 轮 询 : 是 对 定时 轮 询 的 改进 和 提高 ， 目 地 是 为 了 降低 无 效 的 网 络 传输 。 当 服务 器 端 
没有 数据 更 新 的 时 候 ， 连 接 会 保持 一 段 时 间 直 到 数据 或 状态 改变 或 者 时 间 过 期 ， 通 过 
用 这 种 机 制 来 减少 无 效 的 客户 端 和 服务 器 间 的 交互 。 当 然 ， 如 果 服 务 端的 数据 变更 非 
常 频繁 的 话 ， 这 种 机 制 和 定时 轮 询 比 较 起 来 没有 本 质 上 的 性 能 的 提高 。 

@ 流 : 就 是 在 客户 端的 页 面 使 用 一 个 隐藏 的 窗口 向 服务 端 发 出 一 个 长 连接 的 请 求 。 服 务 
器 端 接 到 这 个 请 求 后 作出 回应 并 不 断 更 新 连接 状态 以 保证 客户 端 和 服务 器 端的 连接 不 
过 期 。 通 过 这 种 机 制 可 以 将 服务 器 端的 信息 源源 不 断 地 推 向 客户 端 。 这 种 机 制 在 用 户 
体验 上 有 一 点 问题 ， 需 要 针对 不 同 的 浏览 器 设计 不 同 的 方案 来 改进 用 户 体 验 ， 同 时 这 
种 机 制 在 并 发 比较 大 的 情况 下 ， 对 服务 器 端的 资源 是 一 个 极 大 的 考验 。 


但 是 上 述 三 种 方式 实际 看 来 都 不 是 真实 的 实时 通信 技术 ， 只 是 相对 的 模拟 出 来 实时 的 效 
果 , 这 种 效果 的 实现 对 于 编程 人 员 来 说 无 疑 增加 了 复杂 性 ， 对 于 客户 端 和 服务 器 端的 实现 都 需 
要 复杂 的 HITP 链接 设计 来 模拟 双向 的 实时 通信 。 这 种 复杂 的 实现 方法 制约 了 应 用 系统 的 扩展 
性 。 

基于 上 述 闵 端 , 在 HTML 5 中 增加 了 实现 Web 实时 应 用 的 技术 : Web Socket。Web Socket 
通过 浏览 器 提供 的 API 真正 实现 了 具备 像 C/S 架构 下 的 桌面 系统 的 实时 通讯 能 力 。 其 原理 是 
使 用 JavaScript 调用 浏览 器 的 API，API 将 发 出 一 个 WebSocket 请 求 至 服务 器 ， 经 过 一 次 握手 
和 服务 器 建立 了 TCP 通讯 ， 因 为 它 本 质 上 是 一 个 TCP 连接 ， 所 以 数据 传输 的 稳定 性 强 和 数据 
传输 量 小 。 由 于 HTML 5 中 WebSockets 的 实用 性 ， 使 其 具备 了 Web TCP 的 称号 。 

2. WebSocket 技术 的 实现 方法 

WebSocket 技术 本 质 上 是 一 个 基于 TCP 的 协议 技术 。 其 建立 通信 和 链接 的 操作 步骤 如 下 : 


类 为 了 建立 一 个 WebSocket 连接 ， 客 户 端的 浏览 器 首先 要 向 服务 器 发 起 一 个 HTTP 
请 求 ， 这 个 请 求 和 通常 的 HTTP 请 求 有 所 差异 ， 除 了 包含 一 般 的 头 信息 外 ， 还 有 一 个 附加 的 
信息 “Upgrade: WebSocket”， 表 明 这 是 一 个 申请 协议 升级 的 HITP 请 求 。 

t93 服务 器 端 解析 这 些 附加 的 头 信息 ， 经 过 验证 后 ， 产 生 应 答 信息 返回 给 客户 端 。 

io3j 客户 端 接收 返回 的 应 答 信 息 ， 建 立 与 服务 器 端的 WebSocket 连接 ， 之 后 双方 即 可 通 
过 该 连接 通道 自由 地 传递 信息 ， 并 且 这 个 连接 会 持 续 存在 直到 客户 端 或 者 服务 器 端的 某 一 方 主 
动 的 关闭 连接 。 


WebSocket 技术 ， 目 前 还 是 属于 比较 新 的 技术 ， 其 版 本 更 新 较 快 ， 目 前 的 最 新 版 本 基本 上 
可 以 被 Chrome、FireFox、Opera 和 正 〈9.0 以 上 ) 等 浏览 器 支持 。 


D2: 
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在 建立 实时 通信 时 ， 客 户 端 发 到 服务 器 的 内 容 如 下 : 


GET /chat HITP/1.1 

Host: server.example.com 

Upgrade: websocket 

Connection: Upgrade 

Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ 一 

Origin: http://example.com 

Sec-WebSocket-Protocol: chat, superchat8.Sec-WebSocket-Version: 13 


从 服务 器 返回 到 客户 端的 内 容 如 下 : 
HITP/1.1 101 Switching Protocols 
Upgrade: websocket 

Connection: Upgrade 


Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= 
Sec-WebSocket-Protocol: chat 


0@! 其 中 的 “Upgrade:websocket” 表 示 这 是 一 个 特殊 的 HTTP 请 求 , 请求 的 目的 就 是 
要 将 客户 端 和 服务 器 端的 通讯 协议 从 HTTP 协议 升级 到 WebSocket 协议 。 其 中 
提 示 客户 端的 Sec-WebSocket-Key 和 服务 器 端的 Sec-WebSocket-Accept 就 是 重要 的 握 


手 认 证 信息 ， 实 现 握手 后 才 可 以 进一步 地 进行 信息 的 发 送 和 接收 。 


12.2.3 在 服务 器 端 使 用 Web Sockets API 


在 实现 Web Sockets 实时 通信 时 ， 需 要 使 客户 端 和 服务 器 端 建立 链接 ， 需 要 配置 相应 的 内 
容 ， 一 般 构 建 链接 握手 时 ， 客 户 端的 内 容 浏 览 器 都 可 以 代劳 完成 ， 主 要 实现 的 是 服务 器 端的 内 
容 ， 下 面 看 一 下 Web Sockets API 的 具体 使 用 方法 。 

服务 器 端 需要 编程 人 员 自 己 来 实现 ,目前 市 场 上 可 直接 使 用 的 开源 方法 比较 多 , 主要 有 以 
下 5 种 。 

@ Kaazing WebSocket Gateway: 是 用 Java 实现 的 WebSocket Server; 
mod_pywebsocket: 是 用 Python 实现 的 WebSocket Server; 
Netty: 是 用 Java 实现 的 网 络 框架 ， 其 中 包括 了 对 WebSocket 的 支持 ; 
node.js: 是 用 Server 端的 JavaScript 框架 ， 提 供 了 对 WebSocket 的 支持 ; 


@ 
@ 
2 
@@ WebSocket4Net: 是 .net 的 服务 器 端的 实现 。 


除了 使 用 以 上 开源 方法 外 , 程序 员 编写 简单 的 服务 器 端 也 是 可 以 的 。 其 中 服务 器 端 需要 实 
现 握 手 、 接 收 和 发 送 三 个 内 容 。 
下 面 详细 介绍 操作 方法 。 
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1. 握手 


在 实现 握手 时 需要 通过 Sec-WebSocket 信息 来 验证 。 使 用 Sec-WebSocket-Key 和 一 个 随机 
值 构成 一 个 新 的 key 串 ， 然 后 将 新 的 key 串 进行 SHA1 编码 ， 生 成 一 个 由 多 组 两 位 16 进 制 数 
构成 的 加 密 串 ;最 后 再 把 加 密 串 进行 base64 编码 生成 最 终 的 key, 这 个 key 就 是 Sec-WebSocket- 
Accept。 

实现 Sec-WebSocket-Key 运算 的 实例 代码 如 下 : 


///<summary> 
1/ 生成 Sec-WebSocket-Accept 
ll/</summary> 
///<param name="handShakeText"> 客 户 端 握手 信息 </param> 
///<returns>Sec-WebSocket-Accept</returns> 
private static string GetSecKeyAccetp(byte[] handShakeBytes,int bytesLength) 
{ 
string handShakeText = Encoding.UTF8.GetString(handShakeBytes, 0, bytesLength); 
String key = string.Empty; 
RegexT=Dew Regex(("Sec\-WebSocket\-Key:(.*?)\rn"); 
Match m = 1.Match(handShakeText); 
if (m.Groups.Count != 0) 


{ 
key = Regex.Replace(m.Value, (@"Sec\-WebSocket\-Key:(.*?)\mn", "$1").Trim(); 
byte[] encryptionString = SHA1.Create().ComputeHash(Encoding.ASCII.GetBytes(key 3 


"258EAFAS-E914-47DA-95CA-C5ABODC85B11")): 
return Convert.ToBase64String(encryptionString); 
} 


2. 接收 

如 果 握 手 成 功 ， 将 会 触发 客户 端的 onopen 事件 ， 进 而 解析 接收 的 客户 端 信息 。 在 进行 数 
据 信 息 解析 时 ， 会 将 数据 以 字 节 和 比特 的 方式 拆 分 ， 并 按照 以 下 规则 进行 解析 。 

(1) 第 一 字 节 。 


@ 第 一 位 : frame-fin，x0 表示 该 message 后 续 还 有 frame; xl 表示 是 message 的 最 后 一 
个 frame。 

@ 第 二 位 ~ 第 三 位 : 分 别 是 frame-rsv1、frame-rsv2 和 frame-rsv3， 通 常 都 是 x0。 

@ 第 四 位 : frame-opcode, x0 表示 是 延续 frame, xl 表示 文本 frame, x2 表示 二 进 制 frame， 
x3~x7 保留 给 非 控制 fame，x8 表示 关闭 连接 ，x9 表示 ping，xA 表示 pong，xB~xF 
保留 给 控制 frame。 


(2) 第 二 字 节 。 
@ 第 一 位 : Mask，1 表示 该 fame 包含 掩 码 ; 0 表示 无 掩 码 。 
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* 


@ 第 七 位 、 第 七 字 节 和 第 二 字 节 、 第 七 位 和 第 八字 节 : 第 七 位 取 整 数值 ， 若 在 0~125 之 
间 ， 则 是 负载 数据 长 度 ; 若是 126， 表 示 后 两 个 字 节 取 无 符号 16 位 整数 值 ， 是 负载 长 
度 ; 127 表 示 后 8 个 字 节 ， 取 64 位 无 符号 整数 值 ， 是 负载 长 度 。 


(3) 第 三 字 节 ~ 第 六 字 节 : 这 里 假定 负载 长 度 在 0~125 之 间 ， 并 且 Mask 为 1， 则 这 4 个 
是 手 码 。 
(4) 第 七 字 节 和 最 后 一 个 字 节 : 长 度 是 上 面 取出 的 负载 长 度 ， 包 插 扩展 数据 和 应 用 数据 


两 部 分 ,通常 没有 扩展 数据 ， 若 Mask 为 1， 则 此 数据 需要 解码 ， 解 码 规则 为 1B~4B 掩 码 循环 
和 数据 字 节 做 异 或 操作 。 


实现 数据 解析 的 代码 如 下 : 


///<summary> 
WU/ 解析 客户 端 数据 包 
JW/</summary> 
///<param name="recBytes"> 服 务 器 接收 的 数据 包 </param> 
///<param name="recByteLength"> 有 效 数据 长 度 </param> 
///<returns></returns> 
Private static string AnalyticData(byte[] recBytes, int recByteLength) 
| 
if (recByteLength< 2) { return string.Empty; } 
bool fin = (recBytes[0] & 0x80) == 0x80; // 1bit，1 表示 最 后 一 帧 
if (!fin){ 
return string.Empty;// 超过 一 帧 暂 不 处 理 
} 
bool mask flag = (recBytes[1] & 0x80) 一 0x80; // 是 否 包含 掩 码 
if (Imask flag){ 
return string.Empty;// 不 包含 掩 码 的 暂 不 处 理 
int payload_len = recBytes[1] & 0x7F; // 数据 长 度 
byte[] masks = new byte[4]: 
byte[] payload_data: 
if (payload len == 126){ 
Array.Copy(recBytes, 4, masks, 0, 4): 
payload len = (UInt16)(recBytes[21<< 8 | recBytes[3D); 
payload_data = new byte[payload len]; 
Array.Copy(recBytes, 8, payload_data, 0, payload len): 
Yelse if (payload len 一 127){ 
Array.Copy(recBytes. 10, masks, 0, 4); 
byte[] umt64Bytes = new byte[8]: 
for (inti= 0; i< 8; 1++){ 
ulInt64Bytes[i] = recBytes[9 - i]: 
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UInt64 len = BitConverter.ToUInt64(uInt64Bytes, 0): 
payload data = new byte[len]: 
for (UInt64 i= 0; i< len; 1++){ 

payload data[i] = recBytes[i + 14]: 


}else{ 
Array.Copy(recBytes, 2, masks, 0, 4); 
payload data = new byte[payload len]: 
Array.Copy(recBytes, 6, payload_data, 0, payload len); 
} 
for (var i= 0; i< payload len; i++){ 
payload data[i] = (byte)(payload data[i] ^ masks[i % 4]); 
} 
return Encoding.UTF8.GetString(payload_data):56.} 


3. 发 送 数据 

服务 器 端 接收 并 解析 了 客户 端 发 来 的 信息 后 ， 要 返回 相应 的 信息 ， 服 务 器 发 送 的 数据 以 
0x81 开头 ， 紧 接 发 送 内 容 的 长 度 ， 最 后 是 内 容 的 byte 数组 。 

实现 数据 发 送 的 代码 如 下 : 


///<summary> 
// 打包 服务 器 数据 
/</summary> 
///<param name="message"> 数 据 </param> 
/<returmns> 数 据 包 </returmns> 
Private static byte[] PackData(string message) 
{ 
byte[] contentBytes = null: 
byte[] temp = Encoding.UTF8.GetBytes(message): 
if (temp.Length< 126){ 
contentBytes = new byte[temp.Length + 2]; 
contentBytes[0] = 0x81; 
contentBytes[1] = (byte)jtemp.Length: 
Array.Copy(temp, 0, contentBytes, 2, temp.Length): 
}else if (temp.Length< OxFFFF){ 
contentBytes = new byte[temp.Length + 4]: 
contentBytes[0] = 0x81; 
contentBytes[1] = 126; 
contentBytes[2] = (byte)(temp.Length & OxFF): 
contentBytes[3] = (byte)(temp.Length >>8 & OxFF); 
Array.Copy(temp, 0, contentBytes, 4, temp.Length); 
}else{ 
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/ 暂 不 处 理 超 长 内 容 


Teturn contentBytes; 


} 
12.2.4 在 客户 端 使 用 Web Sockets API 


浏览 器 提供 的 API 就 可 以 直接 用 来 实现 客户 端的 握手 操作 ， 在 应 用 时 直接 使 用 JavaScript 
来 调用 即 可 。 
在 客户 端 调用 浏览 器 API， 实 现 握手 操作 的 JavaScript 代码 如 下 : 


Var WsServer = "ws://localhost:8888/Demo'; /服务 器 地 址 


Var websocket = new WebSocket(wsServer): /| 创建 WebSocket 对 象 
websocket.send("hello"); // 向 服务 器 发 送 消息 
alert(websocket.readyState); // 查 看 WebSocket 当前 状态 
websocket.onopen = function (evt) { // 已 经 建立 连接 

}; 

websocket.onclose = function (evt) { // 已 经 关闭 连接 

}; 

websocket.onmessage = function (evt) { // 收 到 服务 器 消息 ， 使 用 evt.data 提取 
}; 

websocket.onerror = function (evt) { 1/ 产生 异常 

}; 


12.3 ”综合 实例 一 一 编写 简单 的 Web Socket 服务 器 


在 12.2 节 中 介绍 了 Web Socket API 的 原理 及 基本 使 用 方法 ， 提 到 在 实现 通信 时 关键 要 配 
置 的 是 Web Socket 服务 器 ， 下 面 就 来 介绍 一 个 简单 的 Web Socket 服务 器 编写 方法 。 
为 了 实现 操作 ， 这 里 配合 编写 一 个 客户 端 文件 ， 以 测试 服务 器 的 实现 效果 。 


di 首先 编写 客户 端 文件 ， 效 果 如 图 12-4 所 示 。 其 文件 代码 如 下 : 


<html> 
<head> 
<meta charset="UTF-8"> 
<title>Web sockets test</title> 
<script src="jquery-min.js" type="text/JavaScript"></script> 
<script type="text/JavaScript"> 
Var Ws; 
function ToggleConnectionClicked|O { 
ty { 
ws = new WebSocket("ws://192.168.1.101:1818/chat");// 连 接 服务 器 
ws.onopen = function(event){alert(" 已 经 与 服务 器 建立 了 连接 \rn 当前 连接 状态 : "+this.readyState);}; 


12-4 程序 运行 结果 
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其 中 ws.onopen、ws.onmessage、ws.onclose 和 ws.onerror 对 应 了 4 种 状态 的 提示 
信息 。 在 连接 服务 器 时 ， 需 要 在 代码 中 指定 服务 器 的 链接 地 址 ， 测 试 时 将 四 地 址 
提 示 改 为 本 机 卫 即 可 。 


I02 服务 器 程序 可 以 使 用 .net 等 实现 编辑 ， 编 辑 后 服务 器 端的 主 程序 代码 如 下 : 


using System; 
Using System .Net' 
Using System.Net.Sockets; 
using System.Security.Cryptography: 
Using System.Text; 
using System.Text RegularExpressions; 
namespace WebSocket 
{ 
class Program 
{ 
static void Main(string[] args) 
int port = 2828; 
byte[] buffer = new byte[1024]: 
IPEndPoint localEP = new IPEndPoint(IPAddress.Any, port); 
Socket listener = new Socket(localEP.Address.AddressFamily,SocketType.Stream, 
ProtocolType. Tep); 
try{ 
listener.Bind(localEP): 
listener.Listen(10); 
Console.WriteLine(" 等 待 客户 端 连接 .…."); 
Socket sc = listener.Accept0;// 接 受 一 个 连接 
Console. WriteLine(" 接 受到 了 客户 端 : "+scRemoteEndPoint.ToStringO+" 连 接 .…"); 
/握手 
int length = sc.Receive(buffer);// 接 受 客户 端 握手 信息 
sc.Send(PackHandShakeData(GetSecKeyAccetp(buffer,length))): 
Console.WriteLine(" 已 经 发 送 握手 协议 了 .…"); 
// 接 受 客户 端 数据 
Console.WriteLine(" 等 待 客户 端 数 据 …"): 
length = sc.Receive(buffer):// 接 受 客户 端 信息 
string clientMsg=AnalyticData(buffer, length): 
Console.WriteLine(" 接 受到 客户 端 数 据 : "+ clientMsg); 
// 发 送 数据 
string sendMsg = "您 好 ，" + clientMsg: 
Console.WriteLine(" 发 送 数 据 : “"+sendMsg+"” 至 客户 端 …"); 
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sc.Send(PackData(sendMssg)); 
Console.WriteLine(" 演 示 Over!"); 
} 
catch (Exception e) 
{ 
Console. WriteLine(e.ToString()); 


///<summary> 
1/ 打包 服务 器 数据 
ll/</summary> 
///<param name="message"> 数 据 </param> 
W/<returmns> 数 据 包 </retums> 
Private static byte[] PackData(string message) 
{ 
byte[] contentBytes = null: 
byte[] temp = Encoding.UTF8.GetBytes(message); 
if (temp.Length< 126){ 
contentBytes = new byte[temp.Length + 2]; 
contentBytes[0] = 0x81; 
contentBytes[1] = (byte)temp.Length: 
Array.Copy(temp, 0, contentBytes, 2, temp.Length); 
}else if (temp.Length< OxFFFF){ 
contentBytes = new byte[temp.Length + 4]; 
contentBytes[0] = 0x81; 
contentBytes[1] = 126; 
contentBytes[2] = (byte)(temp.Length & OxFF); 
contentBytes[3] = (byte)(temp.Length >>8 & 0xFF): 
Array.Copy(temp, 0, contentBytes, 4, temp.Length); 
}else{ 
// 暂 不 处 理 超 长 内 容 
} 
return contentBytes; 


于 内 容 较 多 ， 这 里 把 中 间 部 分 内 容 省 略 ， 编 辑 后 保存 到 服务 器 文件 目录 。 
3j 测试 服务 器 和 客户 端的 链接 通信 ， 首 先 打开 服务 器 ， 运 行 软件 包 中 的 “素材 
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\ch12\12.3\WebSocket-Server\WebSocket\obj\x86\Debug\WebSocketexe” 文 件 ， 提 示 等 待 客 户 端 
链接 ， 效 果 如 图 12-5 所 示 。 

0 和 运行 客户 端 文件 ( 软件 包 位 置 : 素材 \ch12\12.3\WWebSocket-Client\index.html ) ， 效 果 
如 图 12-6 所 示 。 


sa 本 
OQ http://www.opera... x | D Web sockets test + 忌 


及 大权 地 | localhosy 去 | | 图 -全 用 


与 及 务 器 镁 接 | 
到 医 我 的 名 地 : beston ] 


查看 扩 态 


+ Deo CS 


图 12-5 程序 运行 结果 图 12-6 程序 运行 结果 
I05) 单 击 “与 服务 器 建立 连接 ”按钮 ， 服 务 器 端 显示 已 经 建立 链接 ， 客 户 端 提示 连接 建 
立 ， 且 状态 为 1， 效果 如 图 12-7 所 示 。 


Tavaseriet 
docalhost 


已 经 与 服务 器 建立 了 连接 
当前 连接 状态 : 1 


口 停止 执行 此 页 面 中 的 脚本 


图 12-7 程序 运行 结果 


6j 单 击 “ 发 送 消息 ”按钮 ， 自 服务 器 端 返回 信息 ， 提 示 “ 您 好 ，jane”。 
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口 停止 执行 此 页 面 中 的 脚本 


图 12-8 程序 运行 结果 
12.4 问题 解答 


1. WebSockets 能 替代 什么 ? 

WebSockets 可 以 替代 Long Polling (PHP 服务 端 推送 技术 ) 。 客 户 端 发 送 一 个 请 求 到 服务 
器 , 服务 器 端 并 不 会 响应 还 没准 备 好 的 数据 , 它 会 保持 连接 的 打开 状态 直到 最 新 的 数据 准备 就 
绪 再 发 送 ， 之 后 客户 端 收 到 数据 ， 然 后 发 送 另 一 个 请 求 。 好 处 在 于 减少 任 一 连接 的 延迟 ， 当 一 
个 连接 已 经 打开 时 就 不 需要 创建 另 一 个 新 的 连接 了 。 但 是 Long-Polling 并 不 是 什么 花 俏 技术 ， 
仍 有 可 能 发 生 请 求 暂停 ， 因 此 会 需要 建立 新 的 连接 。 

2. WebSocket 的 优势 在 哪里 ? 

它 可 以 实现 真正 的 实时 数据 通信 。 众 所 周知 ，B/S 模式 下 应 用 的 是 HTTP 协议 ， 是 无 状态 
的 ， 所 以 不 能 保持 持续 的 连接 。 数 据 交换 是 通过 客户 端 提交 请 求 到 服务 器 端 ， 然 后 服务 器 端 返 
回 一 个 应 答 到 客户 端 来 实现 的 。 而 WebSocket 是 通过 HTTP 协议 的 初始 握手 阶段 然后 升级 到 
Web Socket 协议 以 支持 实时 数据 通信 。 

WebSocket 可 以 支持 服务 器 主动 向 客户 端 推送 数据 。 一 旦 服务 器 和 客户 端 通过 WebSocket 
建立 起 连接 ， 服 务 器 便 可 以 主动 的 向 客户 端 推 送 数据 ， 而 不 像 普 通 的 Web 传输 方式 需要 先 
客户 端 发 送 请 求 才 能 返回 数据 ， 从 而 增强 了 服务 器 的 能 力 。 

WebSocket 协议 设计 了 更 为 轻 量 级 的 Header， 除 了 首次 建立 连接 时 需要 发 送 头 部 和 普通 
Web 连接 类 似 的 数据 之 外 ， 建 立 WebSocket 连接 后 ， 相 互 沟通 的 Header 就 会 异常 的 简洁 ， 大 
大 减少 了 元 余 的 数据 传输 。 

WebSocket 提供 了 更 为 强大 的 通信 能 力 和 更 为 简洁 的 数据 传输 平台 ， 能 更 为 方便 的 完成 
Web 开发 中 的 双向 通信 功能 。 
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Web Storage 是 HTML 5 引入 的 一 个 非常 重要 的 功能 ， 可 以 在 客户 端 本 地 存储 数据 ， 类 似 
HTML 4 的 Cookie， 但 可 实现 功能 要 比 Cookie 强大 得 多 ，Cookie 大 小 被 限制 为 4&B，Web 
Storage 官方 建议 为 每 个 网 站 5MB。 


13.1 认识 Web 存储 


在 HTML 5 标准 之 前 , Web 存储 信息 需要 Cookie 来 完成 , 但 是 Cookie 不 适合 大 量 数 据 的 
存储 情况 ， 因 为 数据 是 靠 对 服务 器 的 请 求 来 传递 的 , 这 使 得 Cookie 速度 很 慢 而 且 效 率 也 不 高 。 
为 此 ， 在 HTML 5 中 ，Web 存储 API 为 用 户 如 何在 计算 机 或 设备 上 存储 用 户 信息 作 了 数据 标 
13.3.1 本 地 存储 和 Cookie 的 区 别 

本 地 存储 和 Cookie 扮演 着 类 似 的 角色 ， 但 是 它们 有 根本 的 区 别 。 


@ 本 地 存储 仅 将 数据 存储 在 用 户 的 硬盘 上 ， 等待 用 户 读 取 ,而 Cookie 将 数据 存储 在 服务 
器 上 。 

@ 本 地 存储 仅 供 客户 端 使 用 ， 如 果 需 要 服务 器 根据 存储 数值 作出 反映 ， 就 应 该 使 用 
Cookie。 

@ 读 取 本 地 存储 不 会 影响 到 网 络 带宽 , 但 是 使 用 Cookie 将 会 发 送 数据 到 服务 器 ， 这样 会 
影响 到 网 络 带宽 ， 无 形 中 增加 了 成 本 。 

@ 从 存储 容量 上 看 ， 本 地 存储 可 存储 多 达 5MB 的 数据 , 而 Cookie 最 多 只 能 存储 4KB 的 
数据 信息 。 


13.3.2 ”Web 存储 方法 
在 HIML 5 标准 中 ， 提 供 了 以 下 两 种 在 客户 端 存储 数据 的 新 方法 。 
@@ SessionStorage: 是 基于 session 的 数据 存储 , 在 关闭 或 者 离开 网 站 后 , 数据 将 会 被 删除 ， 
也 被 称 为 会 话 存储 。 
@ localStorage: 没有 时 间 限 制 的 数据 存储 ， 也 被 称 为 本 地 存储 。 
与 会 话 存 储 不 用 ,本 地 存储 将 在 用 户 计 算 机 上 永久 保持 数据 信息 。 关 闭 浏览 器 窗口 后 ,， 如 
果 再 次 打开 该 站 点 ， 可 以 检索 所 有 存储 在 本 地 的 数据 。 
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在 HIML 5 中 ， 数 据 不 是 由 每 个 服务 器 请 求 传递 的 ， 而 是 只 有 在 请 求 时 使 用 数据 ， 这 样 
的 话 ， 存 储 大 量 数据 时 不 会 影响 网 站 性 能 。 对 于 不 同 的 网 站 ， 数 据 存储 于 不 同 的 区 域 ， 并 且 网 
站 只 能 访问 其 自身 的 数据 。 


HTML 5 使 用 JavaScript 来 存储 和 访问 数据 ， 为 此 ， 建 议 用 户 多 了 解 JavaScript 的 
于 基本 知识 。 
提 示 


13.2 HTML 5 Web Storage API 


使 用 HIML 5 Web Storage API 技术 ， 可 以 很 好 地 实现 本 地 存储 。 
13.2.1 测试 浏览 器 的 支持 情况 

Web Storage 在 各 大 主流 浏览 器 中 都 被 支持 ， 但 是 为 了 兼容 老 版 浏览 器 ， 还 是 要 检查 一 下 
是 否 可 以 使 用 这 项 技术 ， 主 要 有 两 种 方法 。 

1. 通过 检查 Storage 对 象 来 判断 

第 一 种 方式 : 通过 检查 Storage 对 象 是 否 存在 来 检查 浏览 器 是 否 支 持 Web Storage, 代码 如 下 : 


if(typeof(Storage)!=="undefined"){ 

// Yes! localStorage and sessionStorage support! 
// Some code..... 

} else { 

// Sorry! No web storage support.. 

} 


2. 分 别 检查 各 自 的 对 象 
第 二 种 方式 就 是 分 别 检 查 各 自 的 对 象 ， 例 如 : 检查 localStorage 是 否 支 持 ， 代 码 如 下 : 


if (typeof(localStorage) 一 "ndefined' ) { 

alert('Your browser does not support html 5 localStorage. Try upgrading.); 
}else { 

// Yes! localStorage and sessionStorage support! 

// Some code..... 

} 

或 者 : 

这 "localStorage' in window && window['localStorage'] ! 一 nulD){ 

// Yes! localStorage and sessionStorage support! 

// Some code..... 

}else{ 

alert(Your browser does not support html 5 localStorage. Try upgrading.); 
用 
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或 者 

if(!!localStorage) { 

// Yes! localStorage and sessionStorage support! 

// Some code..... 

}elsef{ 

alert(Your browser does not support html 5 localStorage. Try upgrading."); 
} 


13.2.2 ”sessionStorage 方法 

sessionStorage 方法 针对 session 进行 数据 存储 。 如 果 用 户 关 闭 浏览 器 窗口 后 ， 数 据 会 被 自 
动 删 除 。 

创建 sessionStorage 方法 的 基本 语法 格式 如 下 : 


<script type="text/JavaScript"> 
sessionStorage.abc=" "; 

</script> 

1. 创建 对 象 

【 例 13.1】 实例 文件 ，ch13\13.1.html) 
<!DOCTYPE html> 

<html> 

<body> 


<script type="text/JavaScript"> 

sessionStorage.name=" 我 们 的 公司 是 : 英 达 科技 文化 公司 "; 
document.write(sessionStorage.name); 

</script> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 13-1 所 示 , 即 可 看 到 sessionStorage 方法 创建 的 对 象 内 容 显示 在 
网 页 中 。 


na [ee 
0 e)G\chi9\9.Lhtml PH CX| GG\chiou9.1. 
文件 (月 ”篇 铝 (E) ”查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 


我 们 的 公司 是 : 英 达 科技 文化 公司 


图 13-1 用 sessionStorage 方法 创建 对 象 的 效果 
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2. 制作 网 站 访问 记录 计数 器 


下 面 继续 使 用 sessionStorage 方法 做 实例 ， 主 要 制作 记录 用 户 访 问 网 站 次 数 的 计数 器 。 
【 例 13.2】〔 实 例文 件 ，ch13\13.2.html) 


<!IDOCTYPE html> 

<html> 

<body> 

<script type="text/JavaScript"> 

if (sessionStorage. count) 

u 

sessionStorage.count=Number(sessionStorage.count) +1: 

lL 

else 

sessionStorage. count=]1; 

} 

document.write(" 您 访问 该 网 站 的 次 数 为 :" + sessionStorage.count); 
</script> 

</body> 

</html> 

在 正 9.0 中 浏览 效果 如 图 13-2 所 示 。 如 果 用 户 刷 新 一 次 页 面 ， 计 数 器 的 数值 将 加 1。 


了 EE 
eS 人 GA\ch1l9\19.2.html PD - O XG\chi9.. | € 
文件 (有 ) ”编辑 (E) ”前 看 (V) ”收藏 夫 (A) ”工具 (TD) 帮助 (H) 


您 访问 该 网 站 的 次 数 为 ，5 


图 13-2 用 sessionStorage 方法 创建 计数 器 效果 


0! 如 果 用 户 关闭 浏览 器 窗口 ， 再 次 打开 该 网 页 时 ， 计 数 器 将 重 置 为 1。 
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13.2.3 localStorage 方法 


与 seessionStorage 方法 不 同 ，localStorage 方法 存储 的 数据 没有 时 间 限 制 。 也 就 是 说 网 页 
浏览 者 关闭 网 页 后 ， 再 次 打开 此 网 页 时 ， 数 据 依 然 可 用 。 
创建 一 个 localStorage 方法 的 基本 语法 格式 如 下 : 


<script type="text/JavaScript"> 
localStorage.abc=" "; 
</script> 
1. 创建 对 象 
【 例 13.3】〔 实 例文 件 ，ch13\13.3.html) 


<!DOCTYPE html> 

<html> 

<body> 

<script type="text/JavaScript"> 

localStorage.name=" 学 习 html 5 最 新 的 技术 : Web 存储 "; 
document.write(localStorage.name): 

</script> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 13-3 所 示 , 即 可 看 到 localStorage 方法 创建 的 对 象 内 容 显示 在 网 


0 ET ES 
& 7 如] GAchi9\19.3.html 信 - OX| 息 6M. | 重 6\ 
文件 (F) ”编辑 (E) ”查看 (V) ”收藏 夫 (A) 工具 (D) ”帮助 (H) 


学 习 HTHL5 最 新 的 技术 ， Web 存储 


图 13-3 用 localStorage 方法 创建 对 象 的 效果 
2. 制作 网 站 访问 记录 计数 器 


下 面 仍然 使 用 localStorage 方法 来 制作 记录 用 户 访问 网 站 次 数 的 计数 器 。 用 户 可 以 清楚 地 
看 到 localStorage 方法 和 sessionStorage 方法 的 区 别 。 


让 


ee 
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【 例 13.4】 “实例 文件 :ch13\13.4.html) 


<!DOCTYPE html> 

<html> 

<body> 

<script type="text/JavaScript"> 

if (localStorage.count) 

{ 

localStorage.count=Number(localStorage.count) +1; 

} 

else 

{ 

localStorage.count=1; 

} 

document.write(" 您 访问 该 网 站 的 次 数 为 : "+localStorage.count"); 

</script> 

</body> 

</html> 

在 IE 9.0 中 浏览 效果 如 图 13-4 所 示 。 如 果 用 户 刷 新 一 次 页 面 ， 计 数 器 的 数值 将 进行 
加 1; 如 果 用 户 关闭 浏览 器 窗口 ， 再 次 打开 该 网 页 ， 计数 器 会 继续 上 一 次 计数 ， 而 不 会 重 
置 为 1。 


ge Ee 
& 一 yD 全 GAchl9\194.html DP- oO X17 入 6. 用 
文件 (有 ”编辑 (E) ”查看 (V) ”收藏 夫 (A) ”工具 (T) ”帮助 (H) 
您 访问 该 网 站 的 次 数 为 ，1 


图 13-4 用 localStorage 方法 创建 计数 器 效果 
13.2.4 Web Storage API 的 其 他 操作 


Web Storage API 的 localStorage 和 sessionStorage 对 象 除了 以 上 基本 应 用 外 ， 还 有 以 下 两 
个 用 法 。 
1. 清空 localStorage 数据 


localStorage 的 clear0 函 数 用 于 清空 同 源 的 本 地 存储 数据 ， 比 如 localStorage.clear0， 它 将 
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删除 所 有 本 地 存储 的 localStorage 数据 。 
而 Web Storage 的 另外 一 部 分 Session Storage 中 的 clear0 函 数 只 清空 当前 会 话 存储 的 
2. 遍历 localStorage 数据 


遍历 localStorage 数据 可 以 查看 localStrage 对 象 保 存 的 全 部 数据 信息 。 在 遍历 过 程 中 ， 需 
要 访问 localStorage 对 象 的 另外 两 个 属性 length 与 key。length 表示 localStorage 对 象 中 保存 数 
据 的 总 量 ，key 表示 保存 数据 时 的 键 名 项 ， 该 属性 常 与 索引 号 〈index) 配合 使 用 ， 表 示 键 名 对 
应 的 数据 记录 ， 其 中 ， 索 引号 〈index) 以 0 值 开始 ， 如 果 取 第 3 条 键 名 对 应 的 数据 ，index 值 
应 该 为 2。 

取出 数据 并 显示 数据 内 容 的 代码 命令 如 下 : 


functino showInfo0{ 

Var array=new Array(); 

for(var i=0;1 

// 调 用 key 方法 获取 localStorage 中 数据 对 应 的 键 名 
// 如 这 里 键 名 是 从 testl 开始 递增 到 testN 的 ， 那 么 localStorage.key(0) 对 应 testl 
Var getKey=localStorage.key(2); 

// 通 过 键 名 获取 值 ， 这 里 的 值 包括 内 容 和 日 期 

Var getVal=localStorage.getItem(getKey); 
//array[0] 就 是 内 容 ，array[1] 是 日 期 
array=getVal.split(","); 

} 

} 


获取 并 保存 数据 的 代码 命令 如 下 : 

Var storage = Window-.localStorage: f 

or (var i=0, len = storage.length: i1< len: i++){ 
Var key = storage.key(2); 


var value = storage.getItem(key): 
console.log(key + "=" + value); } 


由 于 localStorage 不 仅 存储 了 这 里 所 添加 的 信息 ， 可 能 还 存储 其 他 信息 ， 但 是 那些 
信息 的 键 名 也 是 以 递增 数字 形式 表示 的 ， 这 样 如 果 这 里 也 用 纯 数字 就 可 能 履 盖 男 

注 外 一 部 分 的 信息 ,所 以 建议 键 名 都 用 独特 的 字符 区 分 开 , 这 里 在 每 个 ID 前 加 上 test 
以 示 区 别 。 


3. 使 用 JSON 对 象 存 取 数据 


在 HIML 5 中 可 以 使 用 JSON 对 象 存 取 一 组 相关 的 对 象 ,使 用 JSON 对 象 可 以 收集 一 组 上 
户 输入 信息 ， 创 建 Object 来 囊括 这 些 信息 ， 用 JSON 字符 串 来 表示 这 个 Objecb 把 JSON 字符 
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串 存放 在 localStorage 中 。 当 用 户 检索 指定 名 称 时 , 会 自动 用 该 名 称 去 localStorage 取得 对 应 的 
JSON 字符 串 ， 将 字符 串 解 析 到 Object 对 象 ， 然 后 依次 提取 对 应 的 信息 ， 并 构造 HTML 文本 
输入 显示 。 

【 例 13.5】〔 实 例文 件 ，ch13\13.5.html) 

下 面 列举 一 个 简单 的 案例 , 来 介绍 如 何 使 用 JSON 对 象 存 取 数据 ， 有 具体 操作 方法 如 


to 划 新 建 一 个 记事 本 文件 ， 具 体 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="UTF-8"> 

<title> 使 用 JSON 对 象 存 取 数 据 </title> 

<script type="text/JavaScript" src="objectStorage.js"></script> 

</head> 

<body> 

<h3> 使 用 JSON 对 象 存 取 数 据 </h3> 

<h4> 填 写 待 存 取信 息 到 表格 中 </h4> 

<table> 

<tr><td> 用 户 名 :</td><td><input type="text" id="name"></td></tr> 
<tr><td>E-mail:</td><td><input type="text" id="email"></td></tr> 
<tr><td> 联 系 电话 :</td><td><input type="text" id="phone"></td></tr> 
<tr><td></td><td><input type="button" value=" 保 存 " onclick="saveStorage0:"></td></tr> 
</table> 

<hr> 

<h4> 检 索 已 经 存 入 localStorage 的 json 对 象 ， 并 且 展 示 原 始 信息 </h4> 
<p> 

<input type="text" id="find"> 

<input type="button" value=" 检 索 " onclick="findStorage('msg"):"> 
</p> 

<!-- 下 面 这 块 用 于 显示 被 检索 到 的 信息 文本 --> 

<pid="msg"></p> 

</body> 

</html> 


t@3 使 用 正 9.0 浏览 保存 的 html 文件 ， 页 面 显 示 效 果 如 图 13-5 所 示 。 
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~ ES] 芭 可 
二 全 沪 \ch13\13 上 html DP ~ CX ‖ 全 二 有 /SON 允 生存 取 数 .， x | 


文件 (F) 沪 声 [E) ”下 看 (V) ” 收 匣 闪 (A) ”工具 (D) 项 动 (H) 
使 用 JSON 对 象 存 取 数 据 

填写 待 存 取信 息 到 表格 中 

用 户 名 


E-mail: 
联系 电话 
[生存 ] 


检索 已 经 存 入 localStorage 的 json 对 象 ， 并 且 展示 原始 信息 


检索 


图 13-5 创建 存 取 对 象 的 表格 


03j 案例 中 用 到 了 JavaScript 脚本 ， 其 中 包含 两 个 函数 ， 一 个 存 数 据 ， 一 个 取 数 据 ， 具 体 
的 JavaScript 脚本 代码 如 下 : 


function saveStorage(){ // 创 建 一 个 js 对象， 用 于 存放 当前 从 表单 获得 的 数据 

var data = new Object: /将 对 象 的 属性 值 名 依次 和 用 户 输入 的 属性 值 关联 起 来 

data.user=document.getElementById("user").value: 

data.mail=document.getElementById("mail").value; 

data.tel=document.getElementById("tel").value: 

// 创 建 json 对 象 ， 让 其 与 在 html 文件 中 创建 的 对 象 的 字符 串 数据 形式 对 应 

var str = JSON .stringify(data); 

/将 json 对 象 存放 到 localStorage 上 ，key 为 用 户 输入 的 NAME，value 为 这 个 json 字符 串 

localStorage.setItem(data.user,str); 

console.log(" 数 据 已 经 保存 ! 被 保存 的 用 户 名 为 : "+data.user); 

} 

// 从 localStorage 中 检索 用 户 输 入 的 名 称 对 应 的 json 字符 串 , 然后 把 json 字符 串 解 析 为 一 组 信息 , 并 且 打 
印 到 指定 位 置 

function findStorage(id){ // 获 得 用 户 的 输入 ， 是 用 户 希 望 检 索 的 名 字 

Var requiredPersonName = document.getElementById("find").value; 

// 以 这 个 检索 的 名 字 来 查找 localStorage， 得 到 json 字符 串 

Var str=localStorage.getItem(requiredPersonName): 

/解析 这 个 json 字符 串 得 到 Object 对 象 

var data= JSON.parse(str); 

/从 Object 对 象 中 分 离 出 相关 属性 值 ， 然 后 构造 要 输出 的 html 内 容 

var result=" 用 户 名 :"+datauserH<br>'; 

result+="E-mail:"+data.mailt+'<br>"; 

Tesultt=" 联 系 电话 :"+data.telt'<br>'; // 取 得 页 面 上 要 输出 的 容器 

var target = document.getElementById(id): // 用 刚才 创建 的 html 内 容 来 填充 这 个 容器 

target.innerHTML = result: 
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to 级 将 js 文件 和 html 文 件 放 在 同一 目录 下 , 再 次 打开 网 页 , 在 表单 中 依次 输入 相关 内 容 ， 


单 击 “ 保 存 ” 按 钮 ， 如 


图 13-6 所 示 。 


外 沽 hl3\l3.5html 只 ”CX 大 全 十 /SON 半数 闻 取 到 .x 
文件 (站 汕 强 E) 下 看 (V) 次 萝 闪 (A) 工具 [帮助 (H) 


使 用 JSON 对 象 存 取 数 据 
填写 待 存 取信 息 到 表格 中 
用 户 名 :wang 


Email: wang_2013@163.com 
联系 电话 : 13012345678 


检索 已 经 存 入 localStorage 的 json 对 象 ， 并 且 展 示 原 始 信息 


图 13-6 输入 表格 内 容 


tog 在 “检索 ”文本 框 中 输入 已 经 保存 的 信息 的 用 户 名 ， 单 击 “ 检 索 ” 按 钮 ， 则 在 页 面 
下 方 自动 显示 保存 的 用 户 信息 ， 如 图 13-7 所 示 。 


(3 mmehia3s hm D 。 © X | Was oNmr me x 


文件 站 ”如 澳 (5) 至 看 V)】 ， 改 共 闪 A) 工具 才 二 (H) 


使 用 JSON 对 象 存 取 数 据 
填写 待 存 取信 息 到 表格 中 


用 户 名 :wang 
E-mail: wang_2013@163 com 
联系 电话 : 13012345678 


检索 已 经 在 入 localstorage 的 json 对 象 ， 并 且 展 示 原 始 信息 
wang EE 

罗 人 rnt oa. 

联系 电 放 155012545678 


图 13-7 检索 数据 信息 


13.3 ”在 本 地 建立 数据 库 


上 述 简单 介绍 了 如 何 利用 localStorage 实现 本 地 存储 ; 实际 上 ， 除 了 sessionStorage 和 
localStorage 外 , HTML 5 还 支持 通过 本 地 数据 库 进 行 本 地 数据 存储 ,HTML 5 采用 的 是 SQLLite 
这 种 文件 类 型 数据 库 ， 该 数据 库 多 集中 在 嵌入 式 设备 上 。 
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13.3.1 ”本 地 数据 库 概述 

可 以 使 用 OpenDatabase 方法 打开 已 经 存在 的 数据 库 ， 如 果 数 据 库 不 存在 ， 则 使 用 此 方法 
将 会 创建 新 数据 库 。 打 开 或 创建 数据 库 的 代码 命令 如 下 : 

var db = openDatabase('mydb', '1.1',' A list of to do items.', 200000): 

上 述 代码 的 括号 中 设置 了 5 个 参数 ， 其 意义 分 别 为 : 数据 库 名 称 、 版 本 号 、 文 字 说 明 、 数 
据 库 的 大 小 和 创建 回 深 。 


如 果 数 据 库 已 经 创建 了 ， 第 五 个 参数 将 会 调用 此 回 滚 操作 。 如 果 省 略 此 参数 ， 则 
注 仍 将 创建 正确 的 数据 库 。 

以 上 代码 的 意义 : 创建 了 一 个 数据 库 对 象 db， 名 称 是 mydb， 版 本 编号 为 1.1。db 还 带 
有 描述 信息 和 大 概 的 大 小 值 。 用 户 代理 (user agent) 可 使 用 这 个 描述 与 用 户 进行 交流 ， 说 明 
数据 库 是 用 来 做 什么 的 。 利 用 代码 中 提供 的 大 小 值 ， 用 户 代 理 可 以 为 内 容留 出 足够 的 存储 。 如 
果 需 要 ， 这 个 大 小 是 可 以 改变 的 ， 所 以 没有 必要 预先 假设 允许 用 户 使 用 多 少 空间 。 

为 了 检测 之 前 创建 的 连接 是 否 成 功 ， 可 以 检查 那个 数据 库 对 象 是 否 为 null: 

if(!db) 

alert("Failed to connect to database."); 

绝 不 可 以 假设 该 连接 已 经 成 功 建立 ,即使 过 去 对 于 某 个 用 户 是 成 功 的 为 什么 连接 会 失败 ， 
存在 多 个 原因 。 也 许 用 户 代理 出 于 安全 原因 拒绝 你 的 访问 , 也 许 设备 存储 有 限 。 面 对 活跃 而 快 
速 进化 的 潜在 用 户 代理 ， 对 用 户 的 机 器 、 软 件 及 其 能 力作 出 假设 是 非常 不 明智 的 行为 。 


13.3.2 ”用 executeSql 来 执行 查询 
通过 executeSql 方法 执行 查询 ， 代 码 如 下 : 
tx.executeSql(sqlQuery,[valuel.value2..].dataHandler.errorHandler) 
executeSql 方法 有 4 个 参数 ， 作 用 分 别 如 下 。 


@ sqlQuery: 需要 具体 执行 的 sql 语句 ， 可 以 是 create、select、update、delete; 

@ [valuel.value2..]: sql 语句 中 所 有 使 用 到 的 参数 数组 ， 在 executeSql 方法 中 ， 将 sql 语 
多 中 所 要 使 用 的 参数 先 用 “??” 代替,， 然 后 依次 将 这 些 参 数组 成 数组 放 在 第 二 个 参数 中 ; 

@ dataHandler: 执行 成 功 是 调用 的 回调 函数 ， 通 过 该 函数 可 以 获得 查询 结果 集 ; 

@ errorHandler: 执行 失败 时 调用 的 回调 函数 。 


13.3.3 ”使 用 transaction 方法 处 理事 件 


使 用 第 一 步 创 建 的 数据 库 访 问 对 象 (如 db) 执行 transaction 方法 ， 用 来 执行 事务 处 理 ， 
代码 如 下 : 
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db.transaction(function(tx)){ 

// 执 行 访问 数据 库 的 语句 

D; 

transaction 方法 使 用 一 个 回调 函数 作为 参数 , 在 这 个 函数 中 , 执行 访问 数据 库 的 具体 操作 。 


13.4 浏览 器 对 Web 存储 的 支持 情况 


不 同 的 浏览 器 版 本 对 Web 存储 技术 的 支持 情况 是 不 同 的 , 下 表 是 常见 浏览 器 对 Web 存储 
的 支持 情况 。 


浏览 器 名 称 支持 Web 存储 技术 的 浏览 器 版 本 
正 正 8 及 更 高 版 本 

Firefox Firefox 3.6 及 更 高 版 本 

Opera Opera 10.0 及 更 高 版 本 

Safari Safari 4 及 更 高 版 本 


Chrome Chrome 5 及 更 高 版 本 
Android Android 2.1 及 更 高 版 本 


13.5 ”综合 实例 一 一 制作 简单 Web 留言 本 


使 用 Web Storage 功能 可 以 用 来 制作 Web 留言 本 ， 具 体制 作 方 法 如 下 : 
I0 则 构建 页 面 框架 ， 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 本 地 存储 技术 之 Web 留言 本 </title> 
</head> 

<body onload='"initO"> 

</body> 

</html> 


092 添加 页 面 文件 ， 主 要 由 表单 构成 ， 包 括 单 行文 本 表单 和 多 行文 本 表单 ， 代 码 如 下 : 


<hl>Web 留言 本 </h1> 
<table> 
<tr> 
<td> 用 户 名 </td> 
<td><input type="text" name="name" id="name" /></td> 
</tr> 


本 地 存储 技术 第 13 章 


<tr> 
<td> 留 言 </td> 
<td><textarea name="memo" id="memo" cols ="50" rows = "5"></textarea></td> 
</tr> 
<tr> 
<td></td> 
<td> 
<input type="submit" value=" 提 交 " onclick="saveData0" /> 
</td> 
</tr> 
</table> 
<ht> 


<table id="datatable" border="1"></table> 
<p id="msg"></p> 


I03) 为 了 执行 本 地 数据 库 的 保存 及 调用 功能 ， 需 要 插入 数据 库 的 脚本 代码 ， 具 体内 容 如 
下 : 


<script> 
var datatable = null; 
var db = openDatabase("MyData","1.0","MYy Database",2*1024*1024):; 
function initO 
{ 
datatable = document.getElementById("datatable"); 
showAllData0; 
} 
function removeAllDataO{ 
for(var i = datatable.childNodes.length-1:i>=0:1--){ 
datatable.removeChild(datatable.childNodes[i]): 
} 
var tr = documentcreateElement('tr): 
var thl = document.createElement('th"); 
var th2 = document.createElement('th): 
var th3 = document.createElement('th"); 
thl.innerHTML = "用 户 名 "; 
th2.innerHTML = "留言 "; 
th3.innerHTML = "时 间 "; 
tr.appendChild(th1); 
tr.appendChild(th2); 
tr.appendChild(th3): 
datatable.appendChild(tr): 


} 
function showAllData0 
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db.transaction(function(tx){ 
tx.executeSql('create table if not exists MsgData(name TEXT,message TEXT,time INTEGER)'.[]); 
tx.executeSql('select * from MsgData',[],function(tx,rs){ 
removeAllData(); 
for(var i=0;i<rs.rows.length:i++){ 
showData(rs.rows.item(i)); 


D; 
D); 
} 
function showData(row){ 
Var tr=document.createElement('tr"); 
var tdl = document.createElement('td"); 
tdl.innerHTML = row.name; 
var td2 = document.createElement(td); 
td2.innerHTML = row.message: 
var td3 = document.createElement('td"); 
var t= new Date(O; 
t.setTime(row.time); 
ttd3.innerHTML = t.toLocaleDateString() + " " + t.toLocaleTimeString(); 
tr.appendChild(td1); 
tr.appendChild(td2); 
tr.appendChild(td3); 
datatable.appendChild(tr); 
} 
function addData(name,message,time) { 
db.transaction(function(tx){ 
tx.executeSql('insert into MsgData values(?,?,7)',[name,message,time],functionx,rs){ 
alert(" 提 交 成 功 。"); 
},function(tx,error){ 
alert(error.sourcet+"::"+error.message); 
D); 
D); 
}// End of addData 
function saveData0 { 
Var name = document.getElementById(‘name').value; 
var memo = document.getElementById('memo").value; 
Var time = new Date().getTime():; 
addData(name,memo,time); 
showAllData(); 
}// End of saveData 


t 鸣 文件 保存 后 ， 使 用 IE 9.0 浏览 页 面 ， 效 果 如 图 13-8 所 示 。 
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图 13-8 Web 留言 本 


“247。 
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13.6 ”问题 解答 


1. 不 同 的 浏览 器 可 以 读 取 同 一 个 Web 中 存储 的 数据 吗 ? 

在 Web 存储 时 ， 不 同 的 浏览 器 将 存储 在 不 同 的 Web 存储 库 中 。 例 如 用 户 使 用 的 是 下 浏 
览 器 ， 那 么 Web 存储 工作 时 ， 将 所 有 数据 存储 在 正 的 Web 存储 库 中 ， 如 果 用 户 使 用 火狐 浏 
览 器 访问 该 站 点 ， 将 不 能 读 取 正 浏览 器 存储 的 数据 ， 可 见 每 个 浏览 器 的 存储 是 分 开 并 独立 工 
作 的 。 

2. 离线 存储 站 点 时 是 否 需 要 浏览 者 同意 ? 

和 地 理 定位 类 似 , 在 网 站 使 用 manifest 文件 时 , 浏览 器 会 提供 一 个 权限 提示 ,提示 用 户 是 
和 否 将 离线 设 为 可 用 ， 但 是 不 是 每 个 浏览 器 都 支持 这 样 的 操作 。 
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利用 Web worker 技术 ， 可 以 实现 网 页 脚本 程序 的 多 线程 后 台 执行 ， 并 且 不 会 影响 其 他 脚 
本 的 执行 ,为 大 型 网 站 的 顺畅 运行 提供 了 更 好 的 实现 方法 。 本 章 主要 讲述 线程 处 理 技术 , 包括 
Web Workers 概述 和 线程 的 能 套 运用 等 。 


14.1 Web Workers 


在 HIML 5 中 为 了 提供 更 好 的 后 台 程 序 ， 设 计 了 Web Worker 技术 。Web Worker 的 产生 
主要 是 考虑 到 在 HTML 4 中 执行 的 JavaScript Web 程序 都 是 以 单线 程 的 方式 执行 的 , 一 旦 前 面 
的 脚本 花费 时 间 过 长 ， 后 面 的 程序 就 会 因 长 期 得 不 到 响应 而 使 用 户 页 面 操作 出 现 异 常 。 


14.1.1 Web Workers 概述 


Web Worker 实现 的 是 线程 技术 ， 可 以 使 运行 在 后 台 的 JavaScript 独立 于 其 他 脚本 ， 不 会 
影响 页 面 的 性 能 。 

Web Worker 创建 后 台 线 程 的 方法 非常 简单 ， 只 需要 将 在 后 台 线 程 中 执行 的 脚本 文件 ， 以 
URL 地 址 的 方式 创建 在 worker 类 的 构造 器 中 就 可 以 了 ， 其 代码 格式 如 下 : 


Var worker=new worker(“worker.js”): 


目前 大 部 分 主流 的 浏览 器 都 支持 Web Worker 技术 。 创 建 Web Worker 之 前 ， 用 户 可 以 检 
测 浏览 器 是 否 支持 它 ， 可 以 使 用 以 下 方法 检测 浏览 器 对 Web Worker 的 支持 情况 : 


if(typeof(Worker)!=—"undefined") 
{ 
/Yes! Web Worker support! 
// Some code..... 
else 
{ 
// Sorry! No Web Worker support.. 


如 果 浏 览 器 不 支持 该 技术 的 话 ， 将 会 出 现 如 下 提示 信息 ， 如 图 14-1 所 示 。 
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ee | HAUsersAdminist D - © X | @ HUsers\ 


文件 (有 ] ”六 缠 (E) ”前 看 (V) 效 藏 关 (A) 工 划 (TM) 。 医 动 (H) 


Sorry! No Web Worker support.. 


图 12-1 程序 运行 结果 
14.1.2 ”线程 中 常用 的 变量 、 函 数 与 类 


在 进行 Web Worker 线程 创建 时 会 涉及 到 一 些 变量 、 函 数 与 类 内 容 ， 其 中 在 线程 中 执行 的 
JavaScript 脚本 文件 中 可 以 用 到 的 变量 、 函 数 与 类 介绍 如 下 。 


@ Self: Self 关 键 词 用 来 表示 本 线程 范围 内 的 作用 域 。 

@ Imports: 导入 的 脚本 文件 必须 与 使 用 该 线程 文件 的 页 面 在 同一 个 域 中 ， 并 在 同一 个 端 
口中 。 

@ ImportScripts (urls): 导入 其 他 JavaScript 脚本 文件 。 参 数 为 该 脚本 文件 的 URL 地 址 ， 
可 以 导入 多 个 脚本 文件 。 

@ Onmessage: 获取 接收 消息 的 事件 句柄 。 

Navigator 对 象 : 与 window.navigator 对 象 类 似 ， 具 有 appName、platform、userAgent、 


appVersion 这 些 属 性 。 
setTimeout()/setInterval(): 可 以 在 线程 中 实现 定时 处 理 。 
XMLHttpRequest: 可 以 在 线程 中 处 理 Ajax 请 求 。 
Web Workers: 可 以 在 线程 中 广 套 线程 。 
SessionStorage/localStorage: 可 以 在 线程 中 使 用 Web Storage 
Close: 可 以 结束 本 线程 。 
Eval0、isNaNO、escape0: 可 以 使 用 所 有 JavaScript 核心 函数 。 
Object: 可 以 创建 和 使 用 本 地 对 象 。 
WebSockets: 可 以 使 用 WebSockets API 来 向 服务 器 发 送 和 接收 信息 。 
postMessage ( message ): 向 创建 线程 的 源 窗口 发 送 消息 。 
14.1.3 与 线程 进行 数据 的 交互 
在 后 台 执 行 的 线程 是 不 可 以 访问 页 面 和 窗口 对 象 的 ,但 这 并 不 妨碍 前 台 和 后 台 线程 进行 数 
据 的 交互 ， 下 面 就 来 介绍 一 个 前 台 和 后 台 线 程 交互 的 案例 。 
本 案例 中 ， 后 台 执行 的 JavaScript 脚本 线程 从 0~200 的 所 有 整数 中 随机 挑选 一 些 整数 ， 然 
后 在 这 些 选 出 的 整数 中 选择 可 以 被 5 整除 的 整数 , 最 后 将 这 些 选 出 的 整数 交 给 前 台 显 示 , 以 实 
现 前 台 与 后 台 线 程 的 数据 交互 。 
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9 划 完成 前 合 的 网 页 代码 ， 其 代码 内 容 如 下 ( 详 见 代 码 包 中 的 “素材 \ch14\14.1.html”) : 


<!DOCTYPE html> 

<head> 

<meta charset="UTF-8"> 

<title> 前 台 与 后 台 线程 的 数据 交互 </title> 

<script type="text/JavaScript"> 

var intArray=new Array(200);// 随 机 数组 

Var intStr=""; // 将 随机 数组 用 字符 串 进行 连接 

// 生 成 200 个 随机 数 

for(var 1=0;1<200;i++) 

{ 
intArray[il=parseInt(Math.random()*200); 
if(i!=0) 

intStrt=";"; /用 分 号 作 随 机 数组 的 分 隔 符 

intStr+=intArray[i]; 

} 

/向 后 台 线程 提交 随机 数组 

Var worker = new Worker("14.1js"); 

worker.postMessage(intStr): 

// 从 线程 中 取得 计算 结果 

worker.onmessage = function(event) { 
if(event.data!="") 


t 
varh: // 行 号 
varl; // 列 号 
Var tr; 
var td; 


Var intArray=event.data.split(":"): 
var table=document.getElementById("table"): 
for(var i=0;i<intArray.length:i++) 
h=parseInt(i/15,0); 
1=1%15; 
/该 行 不 存在 
这 1] 一 0) 
{ 
// 添 加 新 行 的 判断 
tr=document.createElement("tr"); 
tr.id="tr"+h; 
table.appendChild(tr); 
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/该 行 已 存在 
else 
上 
/获取 该 行 
tr=document.getElementById("tr"+h); 
} 
/添加 列 
td=document.createElement("td'"):; 
tr.appendChild(td); 
// 设 置 该 列 数 字 内 容 
td.innerHTMIL=intArray[h*15+]]: 
// 设 置 该 列 对 象 的 背景 色 
td.style.backgroundColor="#f56848": 
// 设 置 该 列 对 象 数字 的 颜色 
td.style.color="#000000"; 
/设置 对 象 数字 的 宽度 
td.width="30"; 


y 
3 
</script> 
</head> 
<body> 
<h2 style="text-shadow:0.1em 3px 6px blue"> 从 随机 生成 的 数字 中 抽取 5 的 倍数 并 显示 示例 </h2> 
<table id="table"> 
</table> 
</body> 


92 为 了 实现 后 台 线程 ， 需 要 编写 后 台 执 行 的 JavaScript 脚本 文件 ， 其 代码 格式 如 下 ( 详 
见 代 码 包 中 的 “素材 \ch14\14.1js”) : 


onmessage = function(event) { 
Var data = event.data; 
var returnStr; // 将 5 的 倍数 组 成 字符 串 并 返回 
var intArray=data.split(";"); /设置 返回 字符 串 中 数字 分 隔 符 为 “;” 号 
returnStr=""; 
for(var i=0:i<intArray.length:i++) 
i 
if(parseInt(intArray[ 订 )%5==0) // 判 断 能 否 被 5 整除 
{ 
if(returnStr!="") 
TeturmStrt—";"; 
returnStr+=intArray[i]; 
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} 
b 
postMessage(returnStr); /返回 5 的 倍数 组 成 的 字符 串 


一 


tQ3j 使 用 Firefox 浏览 器 打开 编辑 好 的 网 页 文件 ， 显 示 效 果 如 图 14-2 所 示 。 


3) 前 台 与 后 台 线程 的 数据 交互 - Hozilla Firefo 
编 加 外 查看 外 历史 @) 书签 @ 工具 上 帮助 0 


和 团 file11/ 加 C | 图- 


从 随机 生成 的 数字 中 抽取 5 的 倍数 并 显示 示例 


图 14-2 程序 运行 结果 


(2 由 于 数字 是 随机 产生 的 ， 所 以 每 次 生成 的 数据 序列 都 是 不 同 的 。 
注 


14.2 ”线程 馈 套 
线程 中 可 以 嵌 套 子 线程 , 这 样 就 可 以 将 后 台中 较 大 的 线程 切割 成 多 个 子 线程 , 每 个 子 线程 
独立 完成 一 份 工作 ， 可 以 提高 程序 的 效率 。 
14.2.1 单线 程 赃 套 


最 简单 的 线程 嵌 套 是 单 层 的 购 套 ,下 面 来 介绍 一 个 单线 程 的 棋 套 案例 ,该 案例 所 实现 的 效 
果 和 14.1.3 节 中 案例 的 效果 相似 。 其 操作 方法 如 下 : 


to 曲 完成 网 页 前 合 页 面 的 代码 内 容 ， 具 体 代码 如 下 ( 详 见 代码 包 中 的 “素材 
\ch14\14.2.html” ) : 


<!IDOCTYPE html> 

<head> 

<meta charset="UTF-8"> 

<script type="text/JavaScript"> 

Var worker = new Worker("14.2.s"); 
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</head> 

<body> 

<h2 style="text-shadow:0.1em 3px 6px blue"> 从 随机 生成 的 数字 中 抽取 5 的 倍数 并 显示 示例 </h2> 
<table id="table"> 

</table> 

</body> 


I02 下 面 编写 程序 后 全 执行 的 主线 程 的 代码 内 容 , 该 线程 用 于 执行 数据 挑选 , 会 在 0-200 
之 间 随 机 产生 200 个 随机 整数 (数字 可 重复 ) ， 并 将 其 交 与 子 线程 ， 让 子 线程 挑选 可 以 被 5 
整除 的 数字 ( 详 见 代码 包 中 的 “素材 \ch14\14.2js”) : 


onmessage=function(event){ 

var intArray=new Array(200); /产生 随机 的 数组 

/生成 200 个 随机 数 

for(var i=0;i<200;i++) // 数 字 范 围 0-200 
intArray[i]=parseInt(Math.random()*200): 

Var worker:; 

// 调 用 子 线程 

worker=new Worker("14.2-2.js"); 

// 将 随机 数组 提交 给 子 线程 

worker.postMessage(JSON .stringify(intArray)):; 

worker.onmessage = function(event) { 
// 将 挑选 结果 返回 主页 面 
postMessage(event.data): 


} 


03j 经 过 步骤 2 中 主线 程 的 数字 挑选 后 ,可 以 通过 以 下 子 线程 将 这 些 数字 拼接 成 字符 串 ， 
并 返回 主线 程 ， 其 操作 代码 如 下 详 见 代 码 包 中 的 “素材 \ch14\14.2-2js”) : 


onmessage = function(event) { 
Var intArray= JSON.parse(event.data): 
Var returnStr; 
returnStr=""; 
for(var i=0;i<intArray.length;i++) 
{ 
// 判 断 数 字 能 否 被 5 整除 
if(parseInt(intArray[i])%5==0) 
{ 
if(returnStr!="") 
retumStrt—";"; 
/将 所 有 可 以 被 5 整除 的 数字 拼接 成 字符 串 
TeturStrt=intArray[j]: 
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/返回 拼接 后 的 字符 串 至 主线 程 
postMessage(returnStr); 

// 关 闭 子 线程 

close0; 


} 


t@9 使 用 Firefox 浏览 器 查看 网 页 前 台 页 面 ， 随 机 产生 了 一 些 可 以 被 5 整除 的 数字 ， 如 图 
14-3 所 示 。 


) Wozilla Firefox 


» @iilN/O cj 图 -5 有 户 尽 -四 -会 自 


久久 机 生 成 的 物 迪 中 机 和 和 8 的 从 物 为 量 天 
孙 


图 14-3 程序 运行 结果 
14.2.2 ”多 个 子 线程 中 的 数据 交互 


在 实现 上 述 案 例 时 , 也 可 以 将 子 线程 再 次 拆 分 ， 生成 多 个 子 线程 ， 由 多 个 子 线程 同时 完成 
工作 ， 这 样 可 以 提高 处 理 速 度 ， 对 较 大 的 JavaScript 脚本 程序 来 说 很 有 用 。 

下 面 将 上 述 案例 的 程序 改 为 多 个 子 线程 撕 套 的 数据 交互 案例 。 

网 页 前 台 文 件 不 需要 修改 ， 主 线程 的 脚本 文件 应 当做 如 下 修改 〈 详 见 代 码 包 中 的 “素材 
\chl4\14.3.js”) : 


onmessage=function(event){ 
Var worker:; 
// 调 用 发 送 数据 的 子 线程 
worker=new Worker("14.3-2.js"); 
Worker.postMessage(""): 
worker.onmessage = function(event) { 
// 接 收 子 线程 中 数据 ， 本 示例 中 为 创建 好 的 随机 数组 
Var data=event.data; 
// 创 建 接收 数据 子 线程 
worker=new Worker("14.2-2.]s"); 
// 把 从 发 送 数 据 子 线程 中 发 回 消息 传递 给 接收 数据 的 子 线程 
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worker.postMessage(data); 
worker.onmessage = function(event) { 
/获取 接收 数据 子 线程 中 传 回 数据 ， 本 示例 中 为 挑选 结果 


Var data=event.data; 
/把 挑选 结果 发 送 回 主页 面 
postMessage(data): 
} 
上 
} 


上 述 代 码 的 主线 程 脚本 中 提 到 了 两 个 子 线程 脚本 ， 其 中 一 个 14.3-2js 负责 创建 随机 数组 ， 
并 发 送 给 主线 程 ， 另 一 个 14.2-2js 负责 从 主线 程 接收 选 好 的 数组 ， 并 进行 处 理 。14.2-2.js 脚本 
延 用 14.2 节 脚 本 文件 。14.3-2js 脚本 文件 的 详细 代码 如 下 《〈 详 见 代 码 包 中 的 “素材 
\ch14\14.3-2js” ) : 


onmessage = function(event) { 

var intArray=new Array(200); 

for(var i=0:1<200;i++) 
intArray[i]=parseInt(Math.random()*200); 

postMessage(JSON .stringify(intArray)); 

close(); 


} 
执行 后 的 效果 如 图 14-4 所 示 。 


Dozilla Firefox 
查看 WW 历史 民 ) 书签 @) 工具 CD) 帮助 人 0 
file:7A/E:/ 写 书 /2…/eh0og/9.2.html x jE 


- 国 file11/ 加 CI 图 -5 户 驴 | 全 -会 癸 


人 及 机 生成 欣 特 当中 抽 了 的 信物 芭 量 志 
示 


图 14-4 程序 运行 结果 
0! 通过 以 上 几 个 案例 的 展示 ， 其 最 终 显示 结构 都 是 相同 的 ， 只 是 代码 的 编辑 与 线程 


的 谋 套 有 所 差异 ， 在 实际 的 应 用 中 合理 地 腐 套 子 线程 虽然 会 使 代码 结构 变 复杂 ， 
提 示 。 但 是 却 能 在 很 大 程度 上 提高 程序 的 处 理 效率 。 
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14.3 合 实例 一 一 创建 Web Worker 计数 器 


本 实例 主要 创建 了 简单 的 Web Worker， 实 现在 后 台 计 数 的 功能 。 具 体操 作 步 又 如 下 : 
I0 划 首先 创建 外 部 的 JavaScript 文件 "workers01.js"， 主 要 用 于 计数 。 代 码 如 下 : 


Var 1=0; 


function timedCount() 

{{ 

ED 

postMessage(i); 
setTimeout("timedCount()",500); 
} 

timedCount(); 


03 以 上 代码 中 重要 的 部 分 是 postMessage() 方 法 ,主要 用 于 向 HTML 页 面 传 
下 面 创建 HTML 页 面 的 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<body> 

<p> 计 数 :<output id="result"></output></p> 

<button onclick="startWorker0"> 开 始 Worker</button> 
<button onclick="stopWorker0"> 停 止 Worker</button> 
<br /><br /> 

<script> 


一 段 消息 。 


加 


Var W; 
function startWorker() 


1 
<! 一 首先 判断 浏览 器 是 否 支 持 Web Worker --> 
if(typeof(Worker)!=—="undefined") 
{ 
<! 一 检测 是 否 存在 worke， 如 果 不 存 在 ， 它 会 创建 一 个 新 的 Web Worker 对 象 ， 然 后 运行 " workers.js01" 
中 的 代码 -> 
if(typeof(w)=="undefined") 
{ 
w=new Worker("/workers01.s"): 
} 
<! 一 向 Web Worker 添加 一 个 "onmessage" 事 件 监听 器 --> 
w.onmessage = function (event) { 


document.getElementById("result").innerHTML=event.data: 
下 
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document.getElementByld("result").innerHTML=" 对 不 起 , 您 的 浏览 器 不 支持 Web Workers..."; 
外 

} 

function stopWorker() 

{ 

<! 一 终止 Web Worker， 并 释放 浏览 器 /计算 机 资源 --> 

WwW.terminate(); 

} 

</script> 

</body> 

</html> 


运行 结果 如 图 14-5 所 示 。 


计数 : 
| 开始 Worker 停止 Worker 


图 14-5 程序 运行 结果 

14.4 ”问题 解答 
1. 工作 线程 (Web Worker) 的 主要 应 用 场景 有 哪些 ? 
工作 线程 的 主要 应 用 场景 有 三 个 ， 分 别 如 下 : 


@ 使 用 工作 线程 做 后 台数 值 (算法 ) 计算 。 
@ 使 用 共享 线程 处 理 多 用 户 并 发 连接 。 
@ HTML 5 线程 代理 。 


2. 目前 浏览 器 对 Web Worker 的 支持 情况 如 何 ? 
目前 大 部 分 主流 的 浏览 器 都 支持 Web Worker， 但 是 正 目前 并 不 支持 。 
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网 页 离线 应 用 程序 是 实现 离线 Web 应 用 的 重要 技术 。 目 前 已 有 的 离线 Web 应 用 程序 很 多 ， 
都 需要 本 书 知识 做 基础 。 通 过 本 章 的 学 习 ， 读 者 能 够 掌握 HTML 5 离线 应 用 程序 的 基础 知识 ， 
了 解 离线 应 用 程序 的 实现 方法 。 


15.1 HTML 5 离线 应 用 程序 


为 了 能 在 离线 的 情况 下 访问 网 站 ， 可 以 采用 HTML 5 的 离线 Web 功能 。 下 面 来 学 习 Web 
应 用 程序 如 何 缓存 。 


15.1.1 本 地 缓存 


在 HTML 5 中 ， 新 增 了 本 地 缓存 ， 也 就 是 HTML 离线 Web 应 用 ， 主 要 是 通过 应 用 程序 组 
存 整个 离线 网 站 的 HIML、CSS、JavaScript、 网 站 图 像 和 资源 。 当 服务 器 没有 和 Internet 建立 
连接 的 时 候 ， 也 可 以 利用 本 地 缓存 中 的 资源 文件 来 正常 运行 Web 应 用 程序 。 

另外 如 果 网 站 发 生 了 变化 ， 应 用 程序 缓存 将 重新 加 载 变化 的 数据 文件 。 


15.1.2 ”本 地 缓存 与 浏览 器 网 页 缓存 的 区 别 
浏览 器 网 页 缓存 与 本 地 缓存 的 主要 区 别 如 下 : 


@ 浏览 器 网 页 缓存 主要 是 为 了 加 快 网 页 加 载 的 速度 ， 所 以 会 对 每 一 个 打开 的 网 页 都 进行 
缓存 操作 ， 而 本 地 缓存 是 为 整个 Web 应 用 程序 服务 的 ， 只 缓存 那些 指定 缓存 的 网 页 。 

@ 在 网 络 连接 的 情况 下 ， 浏 览 器 网 页 缓存 一 个 页 面 的 所 有 文件 ， 但 是 一 旦 离线 ， 用 户 单 
击 链接 时 ， 将 会 得 到 一 个 错误 消息 。 而 本 地 缓存 在 离线 时 ， 仍 然 可 以 正常 访问 。 

@ 对 于 网 页 浏览 者 而 言 ， 浏 览 器 网 页 缓存 了 哪些 内 容 和 资源 ， 这 些 内 容 是 否 安 全 等 都 未 
知 ; 而 本 地 缓存 的 页 面 是 编程 人 员 指 定 的 内 容 ， 所 以 相对 比较 安全 。 


15.1.3 ”支持 离线 行为 


要 支持 离线 行为 ， 首 先 要 能 够 判断 网 络 连接 状态 ， 在 HIML 5 中 引入 了 一 些 判断 应 用 程 
序 网 络 连接 是 否 正常 的 新 的 事件 。 对 应 应 用 程序 的 在 线 状态 和 离线 状态 会 有 不 同 的 行为 模式 。 
用 于 实现 在 线 状态 监测 的 是 window.navigator 对 象 的 属性 。 其 中 的 navigator.online 属性 是 
一 个 标明 浏览 器 是 否 处 于 在 线 状态 的 布尔 属性 ， 当 online 值 为 true 并 不 能 保证 web 应 用 程序 
在 用 户 的 机 器 上 一 定 能 访问 到 相应 的 服务 器 , 而 当 其 值 为 false 时 ,不管 浏 览 器 是 否 真 正 联网 ， 
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程序 都 不 会 尝试 进行 网 络 连接 。 


监测 页 面 状 态 是 在 线 还 是 离线 的 具体 代码 如 下 : 


/页 面 加 载 的 时 候 ， 设 置 状态 为 online 或 offline 
function loaddemo(O{ 
if (navigator.online) { 
log(“online™); 
}else{ 
log(“offline”); 
} 
} 
// 添 加 事件 监听 器 ， 在 线 状态 发 生变 化 时 ， 触 发 相应 动作 
window.addeventlistener(“online”,function€{ 
}, true); 
window-.addeventlistener(“offline ”function(e) { 
log(“offline™); 
},true); 


人 上 述 代码 可 以 在 但 浏览 器 中 使 用 . 


引 


15.2 了 解 Manifest (清单 ) 文件 


那么 客户 端的 浏览 器 是 如 何 分 清 应 该 缓存 那些 文件 ? 这 就 需要 依靠 manifest 文件 来 管理 。 


manifest 文件 是 一 个 简单 的 文本 文件 , 在 该 文件 中 以 清单 的 形式 列举 了 需要 被 缓存 或 不 需要 被 
缓存 的 资源 文件 的 文件 名 称 以 及 这 些 资 源 文件 的 访问 路 径 。 


Manifest 文件 把 指定 的 资源 文件 类 型 分 为 三 类 ， 分 别 是 CACHE 、NETWORK 和 


FALLBACK， 这 三 类 的 含义 分 别 如 下 。 


@ CACHE 类 别 : 该 类 别 指定 需要 被 缓存 在 本 地 的 资源 文件 。 这 里 需要 特别 注意 的 是 : 
如 果 为 菜 个 页 面 指定 需要 本 地 缓存 的 资源 文件 时 ， 不 需要 把 这 个 页 面 本 身 指定 在 
CACHE 类 型 中 , 因为 如 果 一 个 页 面具 有 manifest 文 件 , 浏览 器 会 自动 对 这 个 页 面 进行 
本 地 缓存 。 

@ NETWORK 类 别 : 该 类 别 为 不 进行 本 地 缓存 的 资源 文件 ， 只 有 当 客 户 端 与 服务 器 端 建 
立 连 接 的 时 候 才 能 访问 这 些 资 源 文件 。 

@ FALLBACK 类 别 : 该 类 别 中 指定 两 个 资源 文件 ,其 中 一 个 资源 文件 为 能 够 在 线 访问 时 
使 用 的 资源 文件 ， 另 一 个 资源 文件 为 不 能 在 线 访 问 时 使 用 的 备用 资源 文件 。 


以 下 是 一 个 简单 的 manifest 文件 的 内 容 : 


CACHE MANIFEST 
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# 文 件 的 开头 必须 是 CACHE MANIFEST 
CACHE: 

123.html 

myphoto.jpg 

12.php 

NETWORK: 

http://www.baidu.com/xxx 

feifeiphp 

FALLBACK: 

online.js locale.js 


上 述 代码 含义 分 析 如 下 : 
指定 资源 文件 ， 文 件 路 径 可 以 是 相对 路 径 ， 也 可 以 是 绝对 路 径 。 指 定时 每 个 资源 文件 
为 独立 的 一 行 。 

@ 第 一 行 必须 是 CACHE MANIFEST， 此 行 的 作用 告诉 浏览 器 需要 对 本 地 缓存 中 的 资源 
文件 进行 具体 设置 。 

@ 每 类 型 都 必须 出 现 ， 而 且 同 一 个 类 别 可 以 重复 出 现 。 如 果 文 件 开头 没有 指定 类 别 而 直 
接 书 写 资源 文件 的 时 候 ， 浏 览 器 把 这 些 资源 文件 视 为 CACHE 类 别 。 

@ 在 manifest 文 件 中 ， 注 释 行 以 “# ”开始 ， 主 要 作用 是 进行 一 些 必要 的 说 明 或 解释 。 


为 单个 网 页 添加 manifest 文件 时 ， 需 要 在 Web 应 用 程序 页 面 上 的 html 元 素 的 manifest 属 
性 中 指定 manifest 文件 的 URL 地 址 。 具 体 的 代码 如 下 : 


<html manifest="123.manifest"> 
</html> 


添加 上 述 代码 后 ， 浏 览 器 就 能 够 正常 地 阅读 该 文本 文件 了 。 


(7 用 户 可 以 为 每 个 页 面 单独 指定 一 个 mainifest 文件 ,也 可 以 对 整个 Web 应 用 程序 指 
2 定 总 的 manifest 文 件 。 
提 示 


上 述 操作 完成 后 ， 即 可 实现 资源 文件 缓存 到 本 地 的 目的 。 当 要 对 本 地 缓存 区 的 内 容 进 行 修 
改 时 ， 只 需 修 改 manifest 文件 。 文 件 被 修改 后 ， 浏 览 器 可 以 自动 检查 manifest 文件 ， 并 自动 更 
新 本 地 缓存 区 中 的 内 容 。 


15.3 了 解 applicationcache API 
传统 的 Web 程序 中 浏览 器 也 会 对 资源 文件 进行 cache, 但 是 并 不 是 很 可 靠 , 有 时 起 不 到 预 


期 的 效果 。 而 HIML 5 中 的 application cache 支持 离线 资源 的 访问 ,为 离线 Web 应 用 的 开发 提 
供 了 可 能 
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使 用 application cache API 的 好 处 有 以 下 几 点 。 

@ 用 户 可 以 在 离线 时 继续 使 用 ; 

@ 缓存 到 本 地 ， 节 省 带宽 ， 加 速 用 户 体验 的 反馈 ; 

@ 减轻 服务 器 的 负载 。 

Applicationcache API 是 一 个 操作 应 用 缓存 的 接口 ， 是 windows 对 象 的 直接 子 对 象 
window.applicationcache。window.applicationcache 对 象 可 触发 一 系列 与 缓存 状态 相关 的 事件 。 
具体 事件 如 下 表 所 示 。 


事件 接口 触发 条 件 后 续 事件 
用 户 代理 检查 更 新 或 者 在 第 一 次 尝试 
g Gi 5 ,、 ,| noupdate, downloading, obs 
checking Event 下 载 manifest 文件 的 时 候 ， 本 事件 往往 


olete, error 


是 事件 队列 中 第 一 个 被 触发 的 
检测 出 manifest 文件 没有 更 新 
用 户 代理 发 现 更 新 并 且 正在 获取 资源 ， 


noupdate 


progress, error, cached, upd 


downloading Event 或 者 第 一 次 下 载 manifest 文件 列表 中 列 
ateready 
举 的 资源 
ProgressE | 用 户 代理 正在 下 载 manifest 文件 中 需要 | progress, error, cached, upd 
rogress 
EE vent 缓存 的 资源 ateready 
manifest 中 列举 的 资源 已 经 下 载 完成 ， 
cached Event _ 无 
并 且 已 经 缓存 
manifest 中 列举 的 文件 已 经 重新 下 载 并 
updateready Event 更 新 成 功 ， 接 下 来 JavaScript 可 以 使 用 | 无 


swapCache0 方 法 更 新 到 应 用 程序 中 


manifest 的 请 求 出 现 404 或 者 410 错误 ， 
obsolete Event _ a 3 
应 用 程序 缓存 被 取消 


此 外 ， 没 有 可 用 更 新 或 者 发 生 错 误 时 ， 还 有 一 些 表示 更 新 状态 的 事件 : 

Onerror 

Onnoupdate 

onprogress 

该 对 象 有 一 个 数值 型 属性 window.applicationcache.status, 代表 了 缓存 的 状态 。 缓存 状态 共 
有 6 种 ， 如 下 表 所 示 。 
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( 续 表 ) 
数值 型 属性 缓存 状态 含义 
3 DOWNLOADING 下 载 中 
4 UPDATEREADY 更 新 就 绪 
5 OBSOLETE 过 期 


window.applicationcache 有 三 个 方法 ， 如 下 表 所 示 。 


方法 名 描述 

update0) 发 起 应 用 程序 缓存 下 载 进程 
abort0 取消 正在 进行 的 缓存 下 载 
swapcache() 切换 成 本 地 最 新 的 缓存 环境 


调用 update() 方 法 会 请 求 浏览 器 更 新 缓存 。 包括 检查 新 版 本 的 manifest 文件 并 下 载 
必要 的 新 资源 。 如 果 没 有 缓存 或 者 缓存 已 过 期 ， 则 会 抛 出 错误 。 


15.4 浏览 器 对 Web 离线 应 用 的 支持 情况 


不 用 的 浏览 器 版 本 对 Web 离线 应 用 技术 的 支持 情况 是 不 同 的， 下 表 是 常见 浏览 器 对 Web 
离线 应 用 的 支持 情况 。 


注 


浏览 器 名 称 支持 Web 离线 应 用 的 浏览 器 版 本 
正 IE 9 及 更 低 版 本 目前 尚 不 支持 
Firefox Firefox 3.5 及 更 高 版 本 

Opera Opera 10.6 及 更 高 版 本 

Safari Safari 4 及 更 高 版 本 

Chrome Chrome 5 及 更 高 版 本 

Android Android 2.0 及 更 高 版 本 


15.5 ”综合 实例 一 一 离线 定位 跟踪 


下 面 结合 上 述 内 容 的 学 习 来 构建 一 个 离线 Web 应 用 程序 ， 具 体内 容 如 下 : 


0 天 创建 记录 资源 的 manifest 文件 。 首 先 要 创建 一 个 缓冲 清单 文件 123.manifest， 文 件 中 
列 出 了 应 用 程序 需要 缓存 的 资源 。 具 体 实现 代码 如 下 : 


CACHE MANIFEST 
# JavaScript 
/offline.js 

#./123.js 
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/log.js 
#stylesheets 
-/CSS.css 
#images 


t@3j 创建 构成 界面 的 HIML 和 CSS。 下 面 来 实现 网 页 结构 ， 其 中 需要 指明 程序 中 用 到 的 
JavaScript 文件 和 CSS 文件 ， 并 且 还 要 调用 manifest 文件 。 具 体 实现 代码 如 下 : 


<!DOCTYPE html > 
<html lang="en" manifest="123.manifest"> 
<head> 
<title> 创 建构 成 界面 的 html 和 CSS</title> 
‘<script src="log.js"></script> 
<script src="offline.js"></script> 
<script src="123.js"></script> 
<link rel="stylesheet" href="CSS.css" /> 
</head> 
<body> 
<header> 
<hl>Web 离线 应 用 </h1> 
</header> 
<section> 
<article> 
<button id="installbutton">check for updates</button> 
<h3>log</h3> 
<div id="info"> 
</div> 
</article> 
</section> 
</body> 
</html> 


上 述 代 码 中 有 两 点 需要 注意 。 其 一 ， 因 为 使 用 了 manifest 特性 ， 所 以 HTML 元 素 
不 能 省 略 (为 了 使 代码 简洁 ， HTML 5 中 允许 省 略 不 必要 的 HTML 元 素 ) 。 其 二 ， 
注 代码 中 引入 了 按钮 , 其 功能 是 允许 用 户 手动 安装 Web 应 用 程序 , 以 支持 离线 情况 。 


I03j 创建 离线 的 JavaScript. 在 网 页 设计 中 经 常会 用 到 JavaScript 文 件 ,该 文件 通过 <script> 
标签 引入 网 页 。 在 执行 离线 Web 应 用 时 ， 这 些 JavaScript 文件 也 会 一 并 存储 到 缓存 中 。 
<offline.js> 
i 
* 记 录 window.applicationcache 触发 的 每 一 个 事件 
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2 
window.applicationcache.onchecking = 
function(e) { 
log("checking for application update"): 

} 
window.applicationcache.onupdateready = 
function(e) { 

log("application update ready"): 

上 
window.applicationcache.onobsolete = 
function(e) { 

log("application obsolete"); 

} 
window.applicationcache.onnoupdate = 
function(e) { 

log("no application update found"); 

} 
window.applicationcache.oncached = 
function(e) { 

log("application cached"); 

} 
window.applicationcache.ondownloading = 
function(e) { 

log("downloading application update"); 

} 
window.applicationcache.onerror = 
function(e) { 


log("online"); 
}, true); 
fe 
*# 将 applicationcache 状态 代码 转换 成 消息 
有 


showcachestatus = function(n) { 
statusmessages = ["uncached","idle","checking","downloading","update ready","obsolete"]; 
Tetum statusmessages[nl; 
B 
install = functionO{ 
log("checking for updates"):; 
try{ 
window.applicationcache.update(); 
}catch (e) { 


applicationcache.onerror(); 
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} 
onload = function(e) { 
// 检 测 所 需 功能 的 浏览 器 支持 情况 
if(!window.applicationcache) { 
log("html 5 offline applications are not supported in your browser."):; 
Teturn; 
} 
if(!window.localstorage) { 
log("html $5 local storage not supported in your browser."); 
retumn; 
b 
if(!navigator.geolocation) { 
log("html 5 geolocation is not supported in your browser."); 
retumn; 
’ 
log("initial cache status: " + showcachestatus(window-.applicationcache.status)); 
document.getelementbyid("installbutton").onclick = checkfor: 
》 
<log.js> 
log = function0O { 
Varp = document.createelement("p"); 
Var message = array.prototype.join.call(arguments," "); 
Pp.innerhtml = message 
document.getelementbyid("info").appendchild(p); 


,09 检查 applicationCache 的 支持 情况 。 并 非 所 有 浏览 器 都 可 以 支持 applicationCache 对 
象 , 所 以 在 编辑 时 需要 加 入 浏览 器 支持 性 检测 功能 , 并 提醒 浏览 者 页 面 无 法 访问 是 浏览 器 兼容 
问题 。 具 体 实现 代码 如 下 : 


onload = function(e) { 
/ 检测 所 需 功能 的 浏览 器 支持 情况 
if (!window.applicationcache) { 
log(" 您 的 浏览 器 不 支持 html 5 Offline Applications "); 
Teturmn; 
} 
if (!window.localStorage) { 
log(" 您 的 浏览 器 不 支持 html 5 Local Storage "); 
return; 
3 
if(!window.WebSocket) { 
log(" 您 的 浏览 器 不 支持 html 5 WebSocket "); 
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Teturn; 
} 
if (Inavigator.geolocation) { 
log(" 您 的 浏览 器 不 支持 html 5 Geolocation "); 
Teturmn; 
} 
log("lnitial cache status:" + showCachestatus(window.applicationcache.status)); 
document.getelementbyld("installbutton").onclick = install: 
} 


ti 名 为 update 按钮 添加 处 理 函 数 。 下 面 来 设置 update 按钮 的 行为 函数 ， 该 函数 功能 为 执 
行 更 新 应 用 缓存 ， 具 体 代 码 如 下 : 


install = function() { 
log(“checking for updates”): 

try{ 
window.applicationcache.update(): 
}catch (e) { 
applicationcache.onerror(): 

} 

} 


单 击 按 钮 后 将 检查 缓存 区 ， 并 更 新 需要 更 新 的 缓存 资源 。 当 所 有 可 用 更 新 都 下 载 
完毕 之 后 ， 将 向 用 户 界面 返回 一 条 应 用 程序 安装 成 功 的 提示 信息 ， 接 下 来 用 户 就 
注 可 以 在 离线 模式 下 运行 了 。 
to8j 添加 Storage 功能 代码 。 当 应 用 程序 处 于 离线 状态 时 , 需要 将 数据 更 新 写 入 本 地 存储 ， 
本 实例 使 用 storage 实现 该 功能 ， 因 为 当 上 传 请 求 失败 后 可 以 通过 storage 得 到 恢复 。 如 果 应 用 
程序 遇 到 某 种 原因 导致 网 络 错误 , 或 者 应 用 程序 被 关闭 的 时 候 , 数据 会 被 存储 以 便 下 次 再 进行 
传输 。 


实现 storage 功能 的 具体 代码 如 下 : 


Var storelocation =function(latitude, longitude){ 

// 加 载 localstorage 的 位 置 列表 

Var locations = json.pares(localstorage.locations || “[]”): 
/添加 地 理 位 置 数据 

locations.push( {“latitude” : latitude, “longitude” : longitude}): 
/保存 新 的 位 置 列 表 

localstorage。 Locations = json.stringify(locations); 


由 于 localstorage 可 以 将 数据 存储 在 本 地 浏览 器 中 , 特别 适用 于 具有 离线 功能 的 应 用 程序 ， 
所 以 本 实例 中 用 它 来 保存 坐标 。 本 地 存储 中 的 缓存 数据 在 网 络 连接 恢复 正常 后 , 应 用 程序 会 自 
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动 与 远程 服务 器 进行 数据 同步 。 


上 @ 辐 添加 离线 事件 处 理 程序 。 对 于 离线 Web 应 用 程序 ， 在 使 用 时 要 结合 当前 状态 执行 特 
定 的 事件 处 理 程序 ， 本 实例 中 的 离线 事件 处 理 程序 设计 如 下 


@ 如 果 应 用 程序 在 线 ， 事 件 处 理 函 数 会 存储 并 上 传 当前 坐标 ; 

@ 如 果 应 用 程序 离线 ， 事 件 处 理 函 数 只 存储 不 上 传 ; 

@ 当 应 用 程序 重新 连接 到 网 络 后 ， 事 件 处 理 函 数 会 在 UI 上 显示 在 线 状 态 ， 并 在 后 台 上 
传 之 前 存储 的 所 有 数据 。 

具体 实现 代码 如 下 : 

window.addeventlistener(‘‘online”, function(e){ 

Log(“online”); 

}, true); 

window.addeventlistener(‘“‘offline”, function(e) { 

Log(“offline”); 

}, true); 

网 络 连接 状态 在 应 用 程序 没有 真正 运行 的 时 候 可 能 会 发 生 改 变 ， 例 如 用 户 关 闭 了 浏览 器 ， 
刷新 页 面 或 跳 转 到 了 其 他 网 站 , 为 了 应 对 这 些 情况 , 离线 应 用 程序 在 每 次 页 面 加 载 时 都 会 检查 
与 服务 器 的 连接 状况 ， 如 果 正 常 ， 会 尝试 与 远程 服务 器 同步 数据 : 

if(navigator.online){ 

Uploadlocations(); 

} 


在 下 9.0 浏 览 器 中 的 预览 效果 如 图 15-1 所 示 。 


# ~ 
(3 chl5U51htnl P ~ © X | @ stymsHTM. 
文件 (Dj 六 纪 (5) ”前 看 (V) ”收藏 交 (A) ”工具 (T) 帮助 (H) 


Web 离线 应 用 


log 


图 15-1 程序 运行 结果 
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15.6 ”问题 解答 


1. 如 何 更 新 离线 存储 ? 

更 新 HTML 5 离线 缓存 主要 有 三 种 方法 : 

@ 用 户 清除 了 离线 存储 的 数据 ， 这 样 不 一 定 是 清理 浏览 器 历史 记录 就 能 做 到 的 ， 因 为 不 
同 浏览 器 管理 离线 存储 的 方式 不 同 。 比 如 Firefox 的 离线 存储 数据 要 到 “选项 ”一 “高 
级 ”一 “网 络 ”一 “ 脱 机 存储 ”里 才 可 以 清除 。 

@ 修改 manifest 文 件 。 

@ 使 用 JavaScriptAPI 编写 更 新 程序 。 


2. 离线 存储 功能 的 主要 作用 有 哪些 ? 

目前 , 在 最 新 的 主流 浏览 器 中 都 已 添加 了 对 HTML 5 的 offline storage 功能 的 支持 , HTML 
5 离线 存储 功能 非常 强大 ， 它 的 作用 是 : 在 用 户 没有 与 因特网 连接 时 ， 照 样 可 以 访问 站 点 或 应 
用 ， 在 用 户 与 因特网 连接 时 ， 自 动 更 新 缓存 数据 。 


A 
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的 一 部 分 ， 任 何 元 素 都 能 够 被 拖 放 。 常 见 的 拖 放 元 素 为 图 片 、 文 字 等 。 
16.1 一 个 简单 的 拖 放 实 例 


下 面 给 出 一 个 简单 的 拖 放 实例 , 主要 实现 的 功能 就 是 把 一 张 图 片 拖 放 到 一 个 矩形 当中 , 实 
例 的 具体 实现 代码 如 下 : 


<IDOCTYPE HIML> 

<html> 

<head> 

<style type="text/css"> 

#div] {width:150px;height:150px:padding:10px:border: 1px solid #aaaaaa:} 
</style> 

<script type="text/JavaScript"> 

function allowDrop(ev) 

{ 

ev.preventDefault(); 

} 

function drag(ev) 

{ 

ev.dataTransfer.setData("Text",ev.target.id); 

} 

function drop(ev) 

{ 

ev.preventDefault(); 

var data=ev.dataTransfer.getData("Text"); 
ev.target.appendChild(document.getElementById(data)): 
} 

</script> 

</head> 

<body> 

<p> 请 把 图 片 拖 放 到 矩形 中 : </p> 

<div 1d="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
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<br> 

<img id="dragl1" src="images/2.gif" draggable="true" ondragstart="drag(event)" /> 
</body> 

</html> 


将 上 述 代码 保存 为 .html 格式 ， 在 正 浏览 器 中 预览 效果 ， 如 图 16-1 所 示 。 
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图 16-1 预览 效果 


可 以 看 到 当选 中 图 片 后 ， 在 不 松 开 鼠 标的 情况 下 ， 可 以 将 其 拖 放 到 矩形 框 中 ， 如 图 16-2 
所 示 。 


|] HAUsersAdminist PD ~ © X | 车 Hi\UsersAdm 
文件 (月 ” 蝙 强 (E) 前 看 (V) 收 基 闪 (A) 工具 (T) 孝 动 (H) 


请 把 图 片 拖 放 到 矩形 中 ， 


图 16-2 拖 放 图 片 
代码 解释 如 下 : 
@ 调用 preventDefault0 来 避免 浏览 器 对 数据 的 默认 处 理 ( drop 事件 的 默认 行为 是 以 链接 
形式 打开 )。 


@ 通过 dataTransfergetData("Text") 方 法 获得 被 拖 的 数据 。 该 方法 将 返回 在 setData() 方 法 
中 设置 为 相同 类 型 的 任何 数据 。 
@ 被 拖 数据 是 被 拖 元 素 的 id("drag1")。 


人 
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把 被 拖 元 素 追加 到 放置 元 素 (目标 元 素 ) 中 。 
16.2 分 析 拖 放 的 实现 过 程 


HTML 实现 拖 放 效 果 ， 常 用 的 实现 方法 是 利用 HTML 5 新 增加 的 事件 drag 和 drop， 下 面 
就 具体 分 析 拖 放 实现 的 过 程 。 
1. 设置 元 素 为 可 拖 放 


首先 ， 为 了 使 元 素 可 拖 动 ， 把 draggable 属性 设置 为 rue， 具体 的 代码 如 下 : 


<img draggable="true" /> 
2. 拖 动 内 容 


实现 拖 放 的 第 二 步 就 是 设置 拖 动 的 元 素 ， 常 见 的 元 素 有 图 片 、 文 字 、 动画 等 。 实 现 拖 放 功 
能 的 是 ondragstart 和 setData0， 即 规定 当 元 素 被 拖 动 时 ， 会 发 生 什 么 。 

例如 : 在 上 面 的 例子 中 ，ondragstart 属性 调用 了 一 个 函数 drag (event) ， 它 规定 了 被 拖 动 
的 数据 。 

dataTransfer.setData() 方 法 设置 被 拖 数 据 的 数据 类 型 和 值 ， 具 体 的 代码 如 下 : 

function drag(ev) 


{ 
ev.dataTransfer.setData("Text",ev.target.id): 


3 

在 这 个 例子 中 ， 数 据 类 型 是 "Text"， 值 是 可 拖 动 元 素 的 id("drag1")。 

3. 放置 位 置 

实现 拖 放 功能 的 第 三 步 就 是 将 可 拖 放 元 素 放 到 适合 位 置 ， 实 现 该 功能 的 事件 是 
ondragover， 默 认 情 况 下 ， 无 法 将 数据 /元 素 放置 到 其 他 元 素 中 。 如 果 需 要 设置 允许 放置 ， 用 户 
必须 阻止 对 元 素 的 默认 处 理 方式 。 

这 就 需要 通过 调用 ondragover 事件 的 eventpreventDefault() 方 法 ， 有 具体 的 代码 如 下 : 

event.preventDefault() 

4. 进行 放置 

当 放 置 被 拖 元 素 时 ， 就 会 发 生 drop 事件 。 在 上 面 的 例子 中 ，ondrop 属性 调用 了 一 个 函数 
drop (event) ， 其 具体 的 代码 如 下 : 

function drop(ev) 


ev.preventDefault(); 
var data=ev.dataTransfer.getData("Text"); 
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ev.target.appendChild(document.getElementById(data)): 
} 


16.3 ”浏览 器 对 拖 放 功 能 的 支持 情况 


不 用 的 浏览 器 版 本 对 拖 放 功 能 的 支持 情况 是 不 同 的 , 下 表 是 常见 浏览 器 对 拖 放 功 能 的 支持 

情况 。 

浏览 器 名 称 支持 拖 放 功能 的 浏览 器 版 本 

正 IE 9.0 及 更 高 版 本 

Firefox | Firefox 3.6 及 更 高 版 本 

Opera | Opera 12.0 及 更 高 版 本 

Safari | safari 5 及 更 高 版 本 

Chrome | Chrome 5 及 更 高 版 本 


16.4 ”综合 实例 1 一 一 在 网 页 中 拖 放 文字 


在 了 解 了 HTML 5 的 拖 放 技术 后 ， 下 面 给 出 一 个 具体 的 实例 ， 实 现 的 效果 就 是 在 网 页 中 
拖 放 文字 。 
具体 的 代码 如 下 : 


<!IDOCTYPE HIML> 

<html> 

<head> 

<title> 拖 放 文字 </title> 

<style> 

body { 
font-family: "Microsoft YaHei'; 

人 

div.drag { 
background-color:#AACCFF:; 
border: 1px solid #666666:; 
cursor:move; 
height:100px: 
width:100px: 
margin: 10px; 
float:left: 

b 

div.drop { 
background-color:#EEEEEE: 
border: 1px solid #666666; 
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cursor: pointer: 


height:150px:; 
width:150px; 
margin: 10px:; 
float:left: 

上 

</style> 

</head> 

<body> 


<div draggable="true" class="drag" 
ondragstart="dragStartHandler(event)">Drag me!</div> 
<div class="drop" 
ondragenter="dragEnterHandler(event)" 
ondragover="dragOverHandler(event)" 
ondrop="dropHandler(event)">Drop here!<ol /></div> 
<script> 
var internalDNDType = 'text'; 
function dragStartHandler(event) { 
event.dataTransfer.setData(internalDNDType;, 
event.target.textContent); 
event.effectAllowed = "move'; 
} 
// dragEnter 事件 
function dragEnterHandler(event) { 
if (event.dataTransfer.types.contains(internalDNDType)) 
if (event.preventDefault) event.preventDefault(:} 
/1/ dragOver 事件 
function dragOverHandler(event) { 
event.dataTransfer.dropEffect = 'copy'; 
if (event.preventDefault) event.preventDefault(); 
} 
function dropHandler(event) { 
Var data = event.dataTransfer.getData(internalDNDType):; 
Var li = document.createElement(1i"): 
litextContent = data; 
event.target.lastChild.appendChild(1): 
} 
</script> 
</body> 
</html> 


下 面 介绍 实现 拖 放 的 操作 步骤 。 
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to 划 将 上 述 代码 保存 为 html 格式 的 文件 ， 在 正 9.0 浏览 器 的 预览 效果 如 图 16-3 所 示 。 


(DO en oS 


文件 (月 疙 弓 (E) 。 豆 看 (V) 收藏 闪 (A) 工具 人 T) 帮助 (H) 


加 


图 16-3 ”预览 效果 
i93j 选中 左边 矩形 中 的 元 素 ， 将 其 拖 虚 到 右边 的 矩形 放 开 ， 如 图 16-4 所 示 。 


图 16-4 ”选择 被 拖 放 文字 
t@3j 松 开 鼠 标 ， 可 以 看 到 拖 放 之 后 的 效果 ， 如 图 16-5 所 示 。 


一 一 


(DO en -ox 


”文件 (月 ” 闫 名 (E) 各 看 (V) 收藏 闪 (A) 工具 (T) 帮助 (H) 


Drag me! 


图 16-5 拖 放 一 次 的 效果 
09 弛 还 可 以 多 次 拖 放 文字 元 素 ， 效 果 如 图 16-6 所 示 。 


2 21 这 
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文件 由。 泊 吉 (到 硬 (V) 


[Drop here! 
1. Drag me! 
2. Drag me! 
3. Drag me! 
| 4 
5 


. Drag me! 
. Drag me! 


图 16-6 拖 放 多 次 的 效果 
16.5 ”综合 实例 2 一 一 在 网 页 中 来 回 拖 放 图 片 


下 面 再 给 出 一 个 具体 的 实例 ， 实 现 的 效果 就 是 在 网 页 中 来 回 拖 放 图 片 。 
具体 的 代码 如 下 : 


<!DOCTYPE HIML> 

<html> 

<head> 

<style type="text/css"> 

#div1, #div2 

{float:left; width:100px; height:3Spx: margin:10px:padding:10px:border:1px solid #aaaaaa;} 
</style> 

<script type="text/JavaScript"> 

function allowDrop(ev) 

{ 

ev.preventDefault(); 

b 

function drag(ev) 

{ 
ev.dataTransfer.setData("Text".ev.target.id); 
} 

function drop(ev) 

由 

ev.preventDefault(); 

var data=ev.dataTransfer.getData("Text"); 
ev.target.appendChild(document.getElementById(data)): 
} 

</script> 

</head> 
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<body> 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> 

<img src="images/] .gif" draggable="true" ondragstart—"drag(event)" id="dragl" /> 
</div> 
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
</body> 
</html> 


在 记事 本 中 输入 这 些 代码 ， 然 后 将 其 保存 为 .html 格式 ， 使 用 正 9.0 浏览 器 查看 该 文件 ， 
即 可 在 页 面 中 看 到 效果 ,选中 网 页 中 的 图 片 ， 即 可 在 两 个 矩形 当中 来 回 拖 放 ， 如 图 16-3 所 示 。 


全 咎 ] Hi\UsersAdminist PD - © X | 碟 HAuse 


文件 (F) ”编辑 (E) ”查看 (V) ”收藏 亲 (A) ”工具 (T) 帮助 (” 


图 16-7 预览 效果 
16.6 ”问题 解答 


1. 在 HIML 5 中， 实现 拖 放 效果 的 方法 唯一 吗 ? 

在 HIML 5 中 ， 实 现 拖 放 效果 的 方法 并 不 是 唯一 的 。 除 了 可 以 使 用 事件 drag 和 drop 外 ， 
还 可 以 使 用 利用 canvas 标签 来 实现 。 

2. 在 HIML 5 中 ， 可 拖 放 的 对 象 只 有 文字 和 图 像 吗 ? 

默认 情况 下 ， 图 像 、 链 接 和 文本 是 可 以 拖 动 的 ， 也 就 是 说 ,不 用 额外 编写 代码 ， 用 户 就 可 
以 拖 动 它们 。 文 本 只 有 在 被 选中 的 情况 下 才能 拖 动 ， 而 图 像 和 链接 在 任何 时 候 都 可 以 拖 动 。 

也 可 以 让 其 他 元 素 拖 动 ，HTML 5 为 所 有 HTML 元素 规定 了 一 个 draggable 属性 ， 表 示 元 
素 是 否 可 以 拖 动 。 图 像 和 链接 的 draggable 属性 自动 被 设置 成 了 tre， 而 其 他 元 素 这 个 属性 的 
默认 值 都 是 false。 要 想 让 其 他 元 素 可 拖 动 ， 或 者 让 图 像 或 链接 不 能 拖 动 ， 都 可 以 设置 该 属性 。 
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HTML 5 规范 定义 了 Server-Sent Event 和 Web Socket 两 个 特性 ， 为 浏览 器 变 成 一 个 RIA 
(Rich Internet Applications 富 互 联网 应 用 ) 客户 端 平台 提供 了 强大 的 支持 ， 使 用 这 两 个 特性 ， 


可 以 帮助 服务 器 将 数据 “推送 ”到 客户 端 浏览 器 。 本 章节 主要 讲述 服务 器 发 送 事件 的 基本 概念 、 
服务 器 发 送 事件 的 实现 过 程 等 。 


17.1 服务 器 发 送 事件 概述 


在 网 页 客户 端 更 新 过 程 中 ,如 果 使 用 早期 技术 ,网 页 不 得 不 询问 是 否 有 可 用 的 更 新 ,这 样 
将 不 能 很 好 地 实时 地 获取 服务 器 的 信息 ， 并 且 加 大 了 资源 的 耗费 。 在 HIML 5 中 ， 通 过 服务 
器 发 送 事件 ， 可 以 让 网 页 客户 端 自动 获取 来 自 服务 器 的 更 新 。 

服务 器 发 送 事件 〈Server-Sent Event) 允许 网 页 获得 来 自 服务 器 的 更 新 ， 这 种 数据 的 传递 
和 前 面 讲 述 的 Web Socket 不 同 。 服 务 器 发 送 事件 是 单 向 传递 信息 ， 服 务 器 将 更 新 的 信息 自动 
发 送 到 客户 端 ， 而 Web Socket 是 双向 通信 技术 。 

目前 ， 常 见 浏览 器 对 Server-Sent Event 的 支持 情况 如 下 表 所 示 。 


浏览 器 名 称 支持 Server-Sent Event 的 浏览 器 版 本 
正 不 支持 

Firefox Firefox 3.6 及 更 高 版 本 

Opera Opera 12.0 及 更 高 版 本 

Safari Safari 5 及 更 高 版 本 

Chrome Chrome 5 及 更 高 版 本 


17.2 服务 器 发 送 事 件 的 实现 过 程 


了 解 完 服务 器 发 送 事件 的 基本 概念 后 ， 下 面 来 学 习 实现 过 程 。 
17.2.1 检测 浏览 器 是 否 支持 Server-Sent Event 
首先 可 以 检查 客户 端 浏览 器 是 否 支持 Server-Sent 事件 。 代 码 如 下 : 


if(typeof(EventSource)!=="undefined") 
由 
/ 浏览 器 支持 的 情况 
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else 


{ 
/ 对 不 起 ， 您 的 浏览 器 不 支持 ……- 


用 户 在 代码 中 设置 提示 信息 ， 这 样 如 果 浏览 者 的 客户 端 不 支持 ， 将 会 显示 提示 信息 。 
17.2.2 “EventSource 对 象 


在 HIML 5 中 的 服务 器 发 送 事件 中 ， 使 用 EventSource 对 象 接收 服务 器 发 送 事件 的 通知 。 
该 对 象 的 事件 含义 如 下 表 所 示 。 


事件 名 称 

onopen 当 连 接 打 开 时 触发 该 事件 
onmessage 当 收 到 信息 时 触发 该 事件 
onerror 当 连 接 关 闭 时 触发 该 事件 


在 事件 处 理 函 数 中 ， 可 以 通过 使 用 readyState 属性 检测 连接 状态 ， 主 要 有 三 种 状态 ， 如 下 
表 所 示 。 


状态 名 称 值 含义 
CONNECTING ”| 0 | 正在 建立 连接 
OPEN | 1 ”| 连接 已 经 建立 ， 正 在 委派 事件 


CLOSED 
例如 下 面 的 代码 就 是 使 用 了 onmessage 的 实例 : 


Var source=new EventSource("/123.php"); 
source.onmessage=function(event) 


{ 
document.getElementById("result").innerHTML+=event.data + "<br />"; 


i 
其 中 ， 该 代码 创建 一 个 新 的 EventSource 对 象 ， 然 后 规定 发 送 更 新 页 面 的 URL (本 例 中 是 
"123.php") 。 每 接收 到 一 次 更 新 ， 就 会 发 生 onmessage 事件 。 当 onmessage 事件 发 生 时 ， 把 
已 接收 的 数据 推 入 id 为 "result” 的 元 素 中 。 


17.2.3 ”服务 器 端 代码 


为 了 让 上 面 的 例子 可 以 运行 ， 还 需要 能 够 发 送 数据 更 新 的 服务 器 〈 比 如 PHP 和 ASP) 。 
服务 器 端 事 件 流 的 语法 是 非常 简单 ， 把 "Content-Type" 报 头 设置 为 "text/event-stream"， 就 可 以 
开始 发 送 事件 流 了 。 

如 果 服 务 器 是 PHP， 则 服务 器 的 代码 如 下 : 
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<?php 

header('Content-Type: text/event-stream'): 
header(Cache-Control: no-cache"):; 

Stime = date(Tr); 

echo "data: The server time is: {$time}\n\n"; 
flushO); 

?> 


如 果 服 务 器 是 ASP， 则 服务 器 的 代码 如 下 : 


<% 
Response.ContentType="text/event-stream" 
Response.Expires=-1 

Response. Write("data: " & nowO) 
Response.Flush() 

%> 


上 面 的 代码 中 , 把 报头 "Content-Type" 设 置 为 "text/event-stream", 规定 不 对 页 面 进行 缓存 ， 
输出 发 送 日 期 〈 始 终 以 "data: " 开头 ) ， 向 网 页 刷新 输出 数据 。 


下 面 通 过 一 个 综合 的 案例 ， 详 细 介绍 整个 代码 的 操作 过 程 。 
则 首先 创建 运行 主页 文件 ， 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset=\"UTF-8\"> 
</head> 
<body> 
<h1> 获 得 服务 器 更 新 </h1> 
<div id="result"> 
</div> 
<script> 
if(typeof(EventSource)!=="undefined") 
{ 
Var source=new EventSource("/123.php"); 
source.onmessage=function(event) 
{ 
document.getElementById("result").innerHTML+=event.data + "<br />"; 
下 
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else 
{ 
document.getElementById("result").innerHTML=" 对 不 起 , 您 的 浏览 器 不 支持 服务 器 发 送 事 件 .."; 
BE 

</script> 

</body> 

</html> 


【人 这 里 规定 通信 数据 的 编码 为 UTF-8 格式 ,另外 所 有 的 页 面 编码 都 要 统一 为 UTF-8， 
提示 否则 会 乱码 或 无 数据 。 


W022 编写 服务 器 端 文件 123.php， 代 码 如 下 : 


<?php 

error_reporting(E_ALL): 

/注意 : 发 送 包 头 定义 MIMIE 类 型 (header 部 分 ) ， 是 实现 服务 器 推送 信息 必须 的 代码 (MIMIE 类 型 定 
义 了 事件 框架 格式 》 

header(\"Content-Type:text/event-stream\"): 

echo 'data: 服 务 器 第 一 次 发 送 数据 "\"n\"; 

echo 'data: 服 务 器 第 二 次 发 送 数 据 '\"\n\"; 

?> 


【六 输出 的 格式 必须 为 data:value 格式 ， 这 是 text/event-tream 格式 规定 。 
提 


旨 | 


3j 在 下 浏览 器 中 的 访问 主页 文件 效果 如 图 17-1 所 示 。 


| 辣 | 加 
一 

© >) 刀 ] FE:\ 桌 面 \ 工 作 表 20: 加 4 其 必 

文件 @) 编辑 区 ) 查看 QV) 收 状 夹 &) 工具 人 区) 帮助 只 


DY 收 毫 天 。 乱 E:\ 昌 面 \ 工 作 表 2013\html5 ”新 增 内 容 \ 精 通 IT 


获得 服务 器 更 新 


对 不 起 ， 您 的 浏览 器 不 支持 服务 器 发 送 事件 ... 


图 17-1 代码 运行 效果 
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0 在 Firefox 浏览 器 中 的 访问 主页 文件 效果 如 图 17-2 所 示 。 服 务 器 每 隔 一 段 时 间 推送 


一 个 此 数据 。 


1. 如 何 编写 


D) Wozilla Firefoz 回回 加 
文件 于) 编辑 人 E) 查看 人) 历史 () 书签 @) 工具 (I) ”帮助 和 
| 站 file: 111E:/ 桌 面 /… 新 增 章节 /17. 1. html 


获得 服务 器 更 新 


服务 器 第 一 次 发 送 数据 
服务 器 第 二 次 发 送 数据 


图 17-2 代码 运行 效果 
17.4 ”问题 解答 


JSP 的 服务 器 端 代码 ? 


如 果 服 务 器 端 是 JSP， 服 务 器 的 代码 段 如 下 : 


<9%Q page contentType="text/event-stream: charset=UTF-8"%> 


<% 


response.setHeader("Cache-Control", "no-cache"):; 
out.print("data: >>server Time" + new java.util.Date() ); 


out.flushO); 
%> 


其 中 ， 编 码 要 采用 统一 的 UTF-8 格式 。 


2， 如 何 优化 


EventSource 
端 浏 览 器 骨 溃 ， 忆 


民 务 器 端 代码 ? 
对 象 是 一 个 不 间歇 运行 的 程序 ， 时 间 一 长 会 大 量 的 消耗 资源 ， 甚 至 导致 客户 
PB 么 如 何 优化 执行 代码 呢 ? 


在 HIML 5 中 使 用 Web Workers 优化 JavaScript 执行 复杂 运算 、 重 复 运 算 和 多 线程 运算 ; 


对 于 执行 时 间 长 、 
照 本 书 的 第 12 章 


消耗 内 存 多 的 JavaScript 程序 代码 最 为 有 用 。Web Workers 的 使 用 方法 请 参 
的 内 容 。 


第 18 章 HTML 5、CSS3 和 
JavaScript 搭配 应 用 


网 页 吸引 人 之 处 ， 莫 过 于 具有 动态 效果 ， 利 用 CSS 伪 类 元 素 可 以 轻易 实现 超级 链接 的 动 


态 效果 。 不 过 利用 CSS 能 实现 的 动态 效果 非常 有 限 。 在 网 页 设计 中 , 还 可 以 将 CSS 与 JavaScript 
结合 ， 创 建 出 具有 动态 效果 的 页 面 。 


18.1 综合 实例 1 一 一 打字 效果 的 文字 


文字 是 网 页 的 灵魂 ， 没 有 文字 的 网 页 ,不 管 特效 多 么 绚丽 多 彩 必定 没有 任何 实际 意义 。 文 
字 特 效 始终 是 网 页 设计 追求 的 目标 ， 通 过 JavaScript 可 以 实现 多 个 网 页 特效 。 文 字 的 打字 效果 
是 JavaScript 脚本 程序 ， 将 预先 设置 好 的 文字 逐一 在 页 面 上 显示 出 来 。 有 具体 步骤 如 下 所 示 。 


to 划分 析 需 求 。 如 果 要 在 网 页 中 实现 打字 效果 ， 需 要 创建 预先 设置 好 的 文字 ， 作 为 输出 
信息 。 该 实例 完成 效果 如 图 18-1 所 示 。 


【€) 中 司 Occh16\167.ntml 甩 - G X | 厨 打 宇 效果 9 文字 | 


松 风水 月 最 新 沿 博 信息 : 关心 身体 ， 就 是 关心 自己 


图 18-1 打字 效果 
03 创建 HIML 页 面 ， 设 置 页 面 基 本 样式 ， 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 打 字 效 果 的 文字 </title> 

<style type="text/css"> 

body {font-size: 14px;font-weight:bold:} 
</style> 

</head> 


松 风水 月 最 新 微 博 信息 : <a id="HotNews" hre 伍 "" target="_blank"></a> 
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</body> 
</html> 


上 面 代码 中 ， 在 <head> 标 记 中 间 设 置 body 页 面 的 基本 样式 ， 例 如 字体 大 小 为 14 像素 ， 
字形 加 粗 。 并 在 body 页 面 创建 了 一 个 超级 链接 。 
在 正 9.0 中 浏览 效果 如 图 18-2 所 示 ， 可 以 看 到 页 面 中 只 显示 了 一 个 提示 信息 。 


本 aS- 
【€) | oNRRR\ch16u67 html CE EPE “| 
| 松 风 水 月 最 新 数 博信 息 : 


图 18-2 ”页 面 基 本 样式 
添加 JavaScript 代码 ， 实 现 打 字 特 效 : 


<SCRIPT LANGUAGE="JavaScript"> 

<!-- 

var NewsTime = 2000;”// 每 条 微 博 的 停留 时 间 
var TextTime = 50; 。“// 微 博文 字 出 现 等 待 时 间 ， 越 小 越 快 
Var newsi = 0; 

var txti = 0; 

Var txttimer: 

Var newstimer:; 

var newstitle = new Array0; / 微 博 标题 

var newshref= new Array0;  // 微 博 链接 
newstitle[0] = "健康 是 身体 的 本 钱 "; 


newshrefl0] = "#"; 
newstitle[1] = "关心 身体 ， 就 是 关心 自己 "; 
newshrefl1] = "#"; 


newstitle[2] = "去 西藏 旅游 了 "; 
newshreff2] = "#"; 
newstitle[3] = "大 雨 倾 贫 ， 很 大 呀 "; 
newshreff3] = "#"; 
function shownewO 
{ 
var endstr=" " 
hwnewstr = newstitle[newsi]; 
newslink = newshreffnewsil; 
if(txti=—(hwnewstr.length-1)) {endstr="";} 
if(txti>=hwnewstr.length){ 
clearInterval(txttime?); 
clearInterval(newstimer): 
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newsitt+; 
if(newsi>=newstitle.length){ 
newsi=0 
newstimer = setInterval("shownew()",NewsTime):; 
txti = 0; 
Teturn; 
} 
clearInterval(txttimer); 
document.getElementById("HotNews").href=newslink: 
document.getElementById("HotNews").innerHTML = hwnewstr.substring(0,txti+1)+tendstr:; 
txtit+; 
txttimer = setInterval("shownewO",TextTime); 
} 
shownew(); 
//--> 
</SCRIPT> 
因为 上 面 代码 是 一 个 整体 ,这 里 就 不 分 开 介绍 了 。 在 JavaScript 代 码 中 ,主要 调用 shownew() 
函数 完成 打字 效果 。 在 JavaScript 代码 开始 部 分 ， 定 义 了 多 个 变量 ， 其 中 数组 对 象 newstitle 用 
于 存放 文本 标题 。 下 面 创建 了 shownew0) 函 数 , 并 在 函数 中 通过 变量 和 条 件 获 取 要 显示 的 文字 ， 
通过 “setInterval("shownew(",NewsTime)” 语 句 输出 文字 内 容 。 代 码 最 后 使 用 shownew0 语 句 
循环 执行 该 函数 中 的 输出 信息 。 
在 正 9.0 中 浏览 效果 如 图 18-3 所 示 ， 可 以 看 到 页 面 中 每 隔 一 定时 间 ， 会 在 提示 信息 后 ， 
逐个 打出 单个 文字 ， 字 体 颜色 为 蓝 色 。 
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图 18-3 ”实现 打字 效果 


18.2 ”综合 实例 2 一 一 文字 升降 特效 


有 的 网 页 为 了 加 大 广告 宣传 力度 , 往往 在 网 页 上 设置 一 个 自动 升降 的 文字 , 用 于 吸引 人 的 
注意 力 。 当 单 击 这 个 升降 文字 , 会 自动 跳 转 到 宣传 页 面 。 本 实例 将 使 用 JavaScript 和 CSS 实现 
文字 升降 效果 。 具 体 步 又 如 下 所 示 。 

iD 册 分 析 需 求 。 如 果 需 要 实现 文字 升降 ， 需 要 指定 文字 内 容 和 文字 升降 范围 ， 即 为 文字 
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在 HIML 页 面 指定 一 个 层 ， 用 于 升降 文字 。 实 例 完成 后 ， 实 际 效果 如 图 18-4 所 示 。 
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图 18-4 文字 升降 
92 创建 HTML， 构 建 升降 DIV 层 ， 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 升 降 的 文字 效果 </title> 

</head> 

<body> 

<div id="napis" style="position: absolute:top: -50;color: #000000;font-family: 宋 体 ;font-size:9pt;border:1px 
#ddeece solid"> 

<a href="" style="font-size:12px:text-decoration:none;"> 

水 月 大 酒店 ， 欢 迎 天 下 来 宾 ! 

</a></div> 

<script language="JavaScript"> 

<!-- 

setTimeout('start()',20); 

//--> 

</script> 

</body> 

</html> 


上 面 代码 创建 了 一 个 DIV 层 , 用 于 存放 升降 的 文字 , 层 的 ID 名 称 是 napis, 并 在 层 的 style 
属性 中 定义 了 层 显示 样式 。 例 如 字体 大 小 、 带 有 边框 、 字 形 等 。 在 DIV 层 中 创建 了 超级 链接 ， 
并 设 定 了 超级 链接 的 样式 。 其 中 的 script 代码 用 于 定时 调用 start 函数 。 在 正 9.0 中 浏览 效果 如 
图 18-5 所 示 ， 可 以 看 到 页 面 空白 ， 无 文字 显示 。 
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图 18-5 空白 页 面 


lO3j 添加 JavaScript 代码 ， 实 现 文字 升降 ， 代 码 如 下 : 
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<script language="JavaScript"> 

<!-- 

done=0: 

step=4 

function anim(yp,yk) 

{ 

if(document.layers) document.layers["napis"].top=yp; 
else document.all["napis"].style.top=yp; 
if(yp>yk) step = -4 

if(yp<60) step =4 
setTimeout('anim('+(ypt+step)+",'+yk+")', 35); 
}function startO 

{ 

if(done) return 

done= 1; 
if(navigator.appName=—"Netscape") { 

var nap=document.getElementById("napis"); 
nap.left=innerWidth/2 - 145; 
anim(60,innerHeight - 60) 

} 

else { 

napis.style.left=11; 
anim(60,document.body.offsetHeight - 60) 
-> 

</script> 


上 面 代码 创建 了 anim0 和 start0 函 数 ， 其 中 anim0 函 数 用 于 设 定 每 次 升降 的 数值 ，start() 
函数 用 于 设 定 每 次 开始 的 升降 的 坐标 。 在 正 9.0 中 浏览 效果 如 图 18-6 所 示 ， 可 以 看 到 页 面 中 
超级 链接 自动 上 下 移动 。 
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图 18-6 上 下 移动 
18.3 ”综合 实例 3 一 一 跑马 灯 效 果 


网 页 中 有 一 种 特效 称 为 跑马 灯 , 即 文字 从 左 向 右 自 动 输出 ， 和 晚上 写字 楼 的 广告 霓虹灯 非 
常 相似 。 在 网 页 中 ， 如 果 CSS 样式 设计 非常 完美 ， 就 会 产生 更 加 靓丽 的 网 页 效果 。 具 体 步 又 


如 下 : 


to 出 分 析 需 求 。 完 成 跑马 灯 效果 ， 需 要 使 用 JavaScript 语言 设置 文字 内 容 、 移 动 速度 和 相 
应 输入 框 ， 使 用 CSS 设置 显示 文字 样式 。 输 入 框 用 来 显示 水 平移 动 文字 。 实 例 完 成 后 ， 实 际 
效果 如 图 18-7 所 示 。 
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图 18-7 马 灯 效果 
to3 引 创建 HIML， 实 现 输入 表单 ， 代 码 如 下 : 


上 面 代码 非常 简单 , 先 创 建 表单 , 并 在 表单 中 存放 入 文本 域 , 用 于 显示 移动 文字 。 在 下 9.0 
中 浏览 效果 如 图 18-8 所 示 ， 可 以 看 到 页 面 中 只 是 存在 一 个 文本 域 ， 没 有 其 他 显示 信息 。 


图 18-8 ”实现 基本 表单 
93j 添加 JavaScript 代码 ， 实 现 文字 移动 ， 代 码 如 下 : 


精通 HTM 5 网 页 设计 


function LenScrollO { 
document.nextForm.lenText.value = msg.substring(seq, msg.length) +" "+msg; 
Seq++; 
于 (seq >msg.length ) 
seq=0; 
window.setTimeout("LenScroll0:", interval); 
} 
</script> 


上 面 代码 中 ， 创 建 了 一 个 变量 msg， 用 于 定义 移动 的 文字 内 容 ， 变 量 interval 用 于 定义 文 
字 移 动 速度 ，LenScroll0 函 数 用 于 在 表单 输入 框 中 显示 移动 信息 。 


在 下 9.0 中 浏览 效果 如 图 18-9 所 示 ， 可 以 看 到 输入 框 中 显示 了 移动 信息 ， 并 且 从 右 向 左 
移动 。 
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图 18-9 ”实现 移动 效果 
to 纪 添加 CSS 代码 ， 修 饰 输入 框 和 页 面 ， 代 码 如 下 : 


<style type="text/css"> 
<!-- 
body{ 
background-color:#FFFFFF; 。/* 页 面 背景 色 */ 
} 
input{ 
background:transparent;  /# 输入 框 背景 透明 */ 
border:none: /# 无 边框 */ 
color:#ffb400; 
font-size:45px; 
font-weight:bold; 
font-family: 黑 体 : 
}--></style> 


上 面 代码 设置 了 页 面 背景 颜色 为 白色 ， 在 input 标记 选择 器 中 ， 定 义 了 边框 背景 为 透明 ， 
无 边框 ,字体 颜色 为 黄色 ， 大 小 为 45 像素 ， 加 粗 、 黑 体 显示 。 在 正 9.0 中 浏览 效果 如 图 18-10 
所 示 ， 可 以 看 到 页 面 中 相 比较 原来 页 面 字体 变 大 ， 颜 色 为 黄色 ， 没 有 输入 框 显示 。 
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图 18-10 最 终 效果 
18.4 综合 实例 4 一 一 闪烁 图 片 


图 片 闪烁 是 常用 的 一 种 特效 ， 用 JavaScript 实现 起 来 非常 简单 ， 这 时 需要 注意 时 间 间 隔 这 
个 参数 ， 数 值 越 大 闪烁 越 不 连续 ， 数 值 越 小 闪烁 越 历 害 ， 可 以 随意 更 改 这 个 值 ， 直 到 取得 满意 
效果 。 具 体 步 骤 如 下 所 示 。 


8 则 分 析 需 求 。 将 图 片 放 在 一 个 DIV 层 上 ， 设 定 图 片 为 可 见 的 ， 然 后 使 用 JavaScript 程 
序 代码 设置 DIV 层 的 显示 和 隐藏 ,这样 就 达到 了 图 片 的 闪烁 效果 .实例 完成 后 ,效果 如 图 18-11 
所 示 。 
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图 18-11 闪烁 效果 
to3 创建 HTML 页面， 构建 DIV 层 ， 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 闪 烁 图 片 </title> 

</head> 

<body ONLOAD="soccerOnload0" topmargin="0"> 
<DIV ID="soccer" STYLE="position:absolute: left:150: top:0"> 
<a hre 人 =""> 

<IMG SRC="feng jpg" border="0"></a> 

</DIV> 

</body> 

</html> 


上 面 代码 中 ,创建 了 一 个 层 ,其 ID 名 称 为 soccer， 样 式 为 绝对 定位 ， 坐 标 位 置 为 (150.0)。 
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然后 在 层 中 创建 一 个 图 片 ， 不 带 边框 。 在 下 9.0 中 浏览 效果 如 图 18-12 所 示 ， 可 以 看 到 显示 一 
个 图 片 ， 不 具有 闪烁 效果 。 
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图 18-12 图 片 
t@3j 添加 JavaScript 代码 ， 实 现 图 片 闪烁 ， 代 码 如 下 : 


<SCRIPT LANGUAGE="JavaScript"> 

var msecs = 500; /改变 时 间 得 到 不 同 的 闪烁 间隔 ; 
Var counter = 0; 

function soccerOnloadO { 

setTimeout("blinkO", msecs); 

} 

function blinkO { 

soccer.style.visibility = 

(soccer.style.visibility == "hidden") ? "visible" : "hidden"; 
counter +=]; 

setTimeout("blinkO", msecs); 

} 

</SCRIPT> 


在 JavaScript 代码 中 ， 创 建 变量 msecs 用 于 定义 闪烁 时 间 间 隔 ， 创 建 变量 counter 用 于 计 
数 。 在 函数 soccerOnload0 中 设 定 每 隔 指定 时 间 图 片 闪烁 一 次 ， 函 数 blink0 用 于 设 定 图 片 显示 
方式 ， 即 层 是 隐藏 还 是 可 见 。 

在 下 9.0 中 浏览 效果 如 图 18-13 所 示 ， 可 以 看 到 显示 一 个 图 片 ， 在 指定 时 间 内 闪烁 。 


图 18-13 最 终 效果 
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18.5 ”综合 实例 5 一 一 左右 移动 的 图 片 


在 广告 栏 中 , 经 常会 有 从 右 到 左 移动 或 者 从 左 到 右 移动 的 图 片 ,一 张 或 者 多 张 , 不 但 增加 
了 页 面 效果 , 也 有 提升 广告 效应 的 作用 。 本 实例 将 使 用 JavaScript 和 CSS 创建 一 个 左右 移动 的 
图 片 。 具 体 步骤 如 下 所 示 。 
to 分 析 需 求 。 实现 左右 移动 的 图 片 ， 需 要 再 页 面 上 定义 一 张 图 片 ， 然 后 利用 JavaScript 
程序 代码 ， 获 取 图 片 对 象 ， 并 使 其 在 一 定 范围 内 ， 即 水 平方 向 上 自由 移动 。 实例 完成 ， 效 果 如 
图 18-14。 
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图 18-14 图 片 移动 
02 创建 HTML 页 面 ， 导 入 图 片 ， 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 左 右 移动 图 片 </title> 
</head> 

<body> 


<img src="feng.jpg" name="picture" 

style="position: absolute: top: 70px: left: 30px:" BORDER="0" WIDTH="140" HEIGHT="40"> 
<script LANGUAGE="JavaScript"><!-- 

setTimeout("moveLR('picture',300,1)",10); 

//--></script> 

</body> 

</html> 


上 面 代 码 中 ， 定 义 了 一 个 图 片 ， 为 绝对 定位 ， 左 边 位 置 是 (70,30) 无 边框 ， 宽 度 为 140 


像素 ， 高 度 为 40 像素 。script 标记 中 ， 使 用 setTimeout 方法 ， 定 时 移动 图 片 。 
在 正 9.0 中 浏览 效果 如 图 18-15 所 示 ， 可 以 看 到 网 页 上 显示 一 个 图 片 。 


图 18-15 图 片 显示 
四 3 加 入 JavaScript 代码 ， 实 现 图 片 左右 移动 ， 代 码 如 下 : 
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X= Number(xl1.substring(0,x1.length-2)): // 30px ->30 

if(c—O0)f{ 

if (movingarea width 一 0) { 

Tight margin = window_width - image width; 

anim(x,right margin,]); 

B 

else { 

Tight margin =x+movingarea width - image width: 

if (movingarea width< x +image width) window.alert("No space for moving!"); 
else anim(x,right margin,1); 

} 

l 

else { 

if (movingarea_ width 一 0) right margin = window_width - image_ width; 
else { 

X=Mathround((window_width-movingarea_width)/2): 

Tight_ margin = Math round((window_width+tmovingarea_width)/2)-image_width; 
} 

anim(x,right_margin,1); 

} 

} 


//--></script> 

上 面 代码 和 文字 水 平方 向 移动 原理 基本 相同 ， 只 是 对 象 不 同 ， 这 里 不 再 介绍 。 

在 正 9.0 中 浏览 效果 如 图 18-16 所 示 ， 可 以 看 到 网 页 上 显示 一 个 图 片 ， 并 在 水 平方 向 上 自 
由 移动 。 
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图 18-16 最 终 效果 
18.6 ”综合 实例 6 一 一 向 上 滚动 菜单 
网 页 中 包含 信息 比较 多 的 时 候 ， 需 要 设计 出 一 些 导 航 菜单 ， 来 实现 页 面 导 航 。 如 果 使 


JavaScript 代码 将 菜单 做 成 动态 效果 , 此 时 菜单 会 更 加 吸引 人 。 本 实例 将 结合 前 面 学 习 的 内 容 ， 
创建 一 个 向 上 深 动 的 菜单 。 具 体 步骤 如 下 : 


四 分 析 需 求 。 实 现 菜单 自动 从 下 到 上 滚动 ， 需 要 把 握 两 个 元 素 ， 一 个 是 使 用 JavaScript 
实现 要 滚动 的 菜单 ， 即 导航 栏 ， 另 一 个 是 使 用 JavaScript 控制 菜单 移动 方向 。 实 例 完成 ， 效 果 
如 图 18-17 所 示 。 


图 18-17 菜单 滚动 
to3 构建 HTML 页 面 ， 代 码 如 下 : 


上 面 代码 比较 简单 ， 只 实现 了 一 个 空白 页 面 ， 页 面 背景 色 为 白色 ， 前 景色 为 黑色 。 
在 正 9.0 中 浏览 效果 如 图 18-18 所 示 ， 可 以 看 到 显示 了 一 个 空白 页 面 。 


图 18-18 空白 HTML 页 面 
togj 加 入 JavaScript 代码 ， 实 现 菜单 滚动 ， 代 码 如 下 : 
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link[4] =time2 htm' 
link[5] =time3 htm' 
link[6] =timel htm' 
link[7] =time2 htm' 
link[8] ='"time3.htm' 
text = new Array(8); 
text[0] =' 首 页 ' 
text[1] = 产品 天 地 ' 
text[2] =' 关 于 我 们 ' 
text[3] = 资讯 动态 ' 
text[4] = 服务 支持 ' 
text[5] = 会 员 中心 ' 
text[6] =' 网 上 商城 ' 
text[7] = 官方 微 博 ' 
text[8] = 企业 文化 ' 
document.write ("<marquee scrollamount="]' scrolldelay="100' direction= "up' width='150' height="150>"); 
for (i=0;i<index;it+) 
| 
document.write ("&nbsp:<img src='dian3.gif width='12， heigh 人 ='12><a href="+link[i]+" 
target=" blank>"); 
document.write (text[i] + "</A><br>"); 
} 
document.write ("</marquee>") 
1/ --></script> 


上 面 代码 创建 了 两 个 数组 对 象 link 和 text， 用 来 存放 菜单 链接 对 象 和 菜单 内 容 ， 在 
JavaScript 代码 中 ， 使 用 <marquee> 定 义 页 面 在 垂直 方向 上 下 移动 。 
在 正 9.0 中 浏览 效果 如 图 18-19 所 示 ， 可 以 看 到 面 左 侧 有 一 个 菜单 ， 自 下 向 上 自由 移动 。 
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图 18-19 最 终 效果 
18.7 综合 实例 7 一 一 跟随 鼠标 移动 的 图 片 


在 众多 网 站 中 , 特别 是 游戏 网 站 或 小 型 商业 网 站 , 都 喜欢 用 鼠标 图 片 跟随 的 特效 ,一 方面 
可 以 在 鼠标 指针 旁边 加 上 网 站 说 明 的 相关 信息 或 者 欢迎 信息 ; 另 一 方面 也 吸引 人 的 注意 力 , 使 
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其 更 加 关注 此 类 网 站 。 本 实例 实现 图 片 跟随 鼠标 移动 的 特效 ， 具 体 步 又 如 下 所 示 。 

0 分 析 需 求 。 需要 通过 JavaScript 获取 鼠标 指针 的 位 置 ， 并 且 动态 的 调整 图 片 的 位 置 。 
图 片 需要 通过 position 的 绝对 定位 ， 很 容易 得 到 调整 。 采 用 CSS 的 绝对 定位 是 JavaScript 调整 
页 面 元 素 常 用 的 方法 ， 效 果 如 图 18-20 所 示 。 
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图 18-20 图片 移动 
02 创建 基本 HTML 页 面 ， 代 码 如 下 : 


<!IDOCTY?PE html> 

<html> 

<head> 

<title> 随 鼠标 移动 的 图 片 </title> 
</head> 

<body> 

</body> 

</html> 


03j 添加 JavaScript 代码 ， 实 现 图 片 随 鼠 标 移动 ， 代 码 如 下 : 


<script type="text/JavaScript"> 
function badAD(htmD){ 
Var ad=document.body.appendChild(document.createElement('div")): 
ad.style.cssText="border:lpx solid #000;background:#FFF:position:absolute:padding:4px 4px 4px 
4px;font: 12px/1.5 verdana;"; 
ad.innerHTML=htmlll'This is bad idea!": 
Var c=ad.appendChild(document.createElement('span')): 
Cc.inner] ="x"; 
c.style.cssText="position:absolute:right:4px:top:2px:cursor:pointer"; 
c.onclick=function (Of 
document.onmousemove=null; 
this.parentNode.style.left="- x 
}; 
document.onmousemove=function (e){ 
e=ellwindow.event:; 


Var x=e.clientX,y=e.clientY:; 


HTML 5、CSS3 和 JavaScript 搭配 应 用 第 18 章 


setTimeout(function() { 


if(ad.hover)return; 
ad.style.left=x+5+'px'; 
ad.style.top=y+5+"px'; 
},120) 
} 
ad.onmouseover=function (){ 
this.hover=true 
a 
ad.onmouseout=function 0){ 
this.hover=false 
} 
} 
badAD('<img src="18.png">) 
</script> 


上 面 代码 中 ， 使 用 appendChild0 方 法 为 当前 页 面 创建 了 一 个 DIV 对 象 ， 并 为 DIV 层 设置 
了 相应 样式 。 下 面 的 e.clientX 和 e.clientY 语句 确定 鼠标 位 置 ， 并 动态 调整 图 片 位 置 ， 从 而 实 
现 图 片 移动 效果 。 在 正 9.0 中 浏览 效果 如 图 18-21 所 示 ， 可 以 看 到 鼠标 在 页 面 移动 时 ， 图 片 跟 
着 移动 。 


瑟瑟 夯 


【¢€ 书 全 OgeehieV6 13 heml ~ CX| 刁 3 上 x 间 区 


闻 


图 18-21 最 终 效果 
18.8 ”综合 实例 8 一 一 树 形 菜单 


作为 一 个 首页 , 其 特点 之 一 是 需要 导航 的 页 面 很 多 , 有 时 为 了 效果 不 得 不 将 所 有 需要 导航 
的 部 分 都 放 到 一 个 导航 菜单 中 。 树 形 导航 菜单 是 网 页 设计 中 最 常用 的 菜单 之 一 。 本 实例 将 创建 
一 个 树 形 菜单 ， 具 体 步 骤 如 下 所 示 。 

0 划 分 析 需 求 。 实 现 一 个 树 形 菜单 ， 需 要 三 个 方面 配合 ， 一 个 是 <ul> 无 序列 表 ， 用 于 显 
示 的 菜单 ， 一 个 是 CSS 样式 ， 修 饰 树 形 菜单 样式 ， 一 个 是 JavaScript 程序 ， 实 现 单 击 时 展开 
菜单 选项 。 实 例 完成 后 ， 效 果 如 图 18-22 所 示 。 


图 18-22 树 形 菜单 
to 引 创建 HTML 页 面 ， 实 现 菜单 列表 ， 代 码 如 下 : 


在 下 9.0 中 浏览 效果 如 图 18-23 所 示 ， 可 以 看 到 无 序列 表 在 页 面 上 显示 ， 并 且 显示 全 部 元 
素 ， 字 体 颜色 为 蓝 色 。 


图 18-23 无 序列 表 
I03) 添加 JavaScript 代码 ， 实 现 单 击 展开 ， 代 码 如 下 : 
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return el.attachEvent('on'+name,fn): 
} 
function nextnode(node){// 寻 找 下 一 个 兄弟 并 剔除 空 的 文本 节点 
if(!node)returmn : 
if(node.nodeType — 1) 
return node; 
if(node.nextSibling) 
Tetum nextnode(node.nextSibling); 
function prevnode(node){// 寻 找 上 一 个 兄弟 并 剔除 空 的 文本 节点 
if(!Inode)return ; 
if(node.nodeType == 1) 
return node; 
if(node.previousSibling) 
return prevnode(node.previousSibling): 
b 
function parcheck(selfchecked){/ 递 归 寻 找 父 亲 元 素 ， 并 找到 input 元 素 进行 操作 
var par = prevnode(selfparentNode.parentNode.parentNode.previousSibling),parspar: 
if(par&&par.getElementsByTagName('input)[0D){ 
par.getElementsByYTagName(input')[0].checked = checked; 
parcheck(par.getElementsByTagName(input)[0].sibcheck(par.getElementsByTagName(input)[0])); 
} 
8 
function sibcheck(self){// 判 断 兄弟 节点 是 否 已 经 全 部 选中 
var sbi = self.parentNode.parentNode.parentNode.childNodes,n=0; 


for(var i=0;i<sbi.length:it+){ 
这 sbifi].nodeType != 1)// 由 于 孩子 结 点 中 包括 空 的 文本 节点 ， 所 以 这 里 累计 长 度 的 时 候 也 要 算 上 去 
nt+t+; 
else if(sbi[i].getElementsByTagName('input)[0].checked) 
D++; 
} 
return n==sbi.length?true:false; 
} 


addEvent(document.getElementById('menu zzjs_net"),'click',function(e){// 绑 定 input 单 击 事件 ， 使 用 
menu_zzjs_net 根 元 素 代理 
e= ellwindow.event: 
var target = etargetlle.srcElement: 
var tp = nextnode(target.parentNode.nextSibling); 
switch(target.nodeName){ 
case 'A':// 单 击 A 标签 展开 和 收缩 树 形 目录 ， 并 改变 其 样式 会 选中 checkbox 
if(tp&&tp.nodeName 一 "ULI){ 
这 tp.style.display != block ){ 
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tp.style.display = 'block’; 
prevnode(target.parentNode.previousSibling).className = 'ren' 
}else{ 
tp.style.display = 'none'; 
prevnode(target.parentNode.previousSibling).className = 'add' 
} 
} 
break 
case'SPAN'// 单 击 图 标 只 展开 或 者 收缩 
var ap = nextnode(nextnode(targetnextSibling).nextSibling): 
if(ap.style.display != "block' ){ 
ap.style.display = "block': 
target.className = 'ren' 
}else{ 
ap.style.display = "none'; 
target.className ='add' 
} 
break; 
case 'TNPUT':// 单 击 checkbox， 父 亲 元 素 选 中 ， 则 孩子 节点 中 的 checkbox 也 同时 选中 ， 孩 子 结 点 取消 
父 元 素 随 之 取消 
if(target.checked){ 
if(tp){ 
var checkbox = tp.getElementsByTagName('input'); 
for(var i=0:i<checkbox.length:i++) 
checkbox[il.checked = true; 
bl 
}else{ 
if(tp){ 
var checkbox = tp.getElementsByTagName('input'); 
for(var i=0:i<checkbox.length:i++) 
checkbox[i].checked = false: 
} 
} 
parcheck(target,sibcheck(target)):// 当 孩子 结 点 取消 选中 的 时 候 调 用 该 方法 递归 其 父 节点 的 checkbox 
逐一 取消 选中 
break:; 
上 
D; 
window.onload = function0{// 页 面 加载 时 给 有 孩子 结 点 的 元 素 动态 添加 图 标 
var labels = document.getElementById(menu zzjs net).getElementsByTagName(label); 
for(var 1=0;1<labels.length:i++){ 


Var span = document.createElement('span'); 
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span.style.cssText ='display:inline-block:height:18px:vertical-align:middle:width:16px:cursorpointer:' 
span.innerHTML ="" 
span.className = "add'; 
if(nextnode(labels[i].nextSibling)&é&nextnode(labels[i].nextSibling).nodeName 一 'UL) 
labels[il.parentNode.insertBefore(span,labels[i]); 
else 
labels[il.className = rem' 
上 
} 


</script> 
在 正 9.0 中 浏览 效果 如 图 18-24 所 示 , 可 以 看 到 无 序列 表 在 页 面 上 显示 , 使 用 鼠标 单 击 可 
以 展开 或 关闭 相应 的 选项 ， 但 其 样式 非常 难看 。 


一 区 汉 
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图 18-24 实现 鼠标 单 击 事件 
0 添加 CSS 代码， 修饰 列表 选项 ， 代 码 如 下 : 


<style type="text/css"> 

body {margin:0:;padding:0;font:12px/1.5 Tahoma,Helvetica, Arial,sans-serif:} 
ul,li, {margin:0:;padding:0:;} 

ul{list-style:none;} 

加 nenu_zzjs_net{fmargin:10px:width:200px:overflow:hidden:} 

#menu zzis net lifline-height:2Spx:} 

#menu zzjs_net .rem{padding-left:16px:} 

#menu zzjs_net .add{background:url| -4px -31px no-repeat:} 

#menu zzjs_net .ren{background:url( -4px -7px no-repeat:} 

#menu _zzjs_net li a{color:#666666:padding-left:5px:outline:none:blr:expression(this.onFocus=this.blur());} 
#menu zzjs net liinput{vertical-align:middle;margin-left:Spx:} 

#menu zzjs_net .two{fpadding-left:20px:display:none:} 

</style> 


在 正 9.0 中 浏览 效果 如 图 18-25 所 示 ， 可 以 看 到 样式 变 得 非常 漂亮 。 
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图 18-25 ”最终 效果 
18.9 ”综合 实例 9 一 一 时 钟 特效 


在 HTML 5 技术 中 ， 新 增 了 一 个 容器 画布 canvas， 用 来 在 页 面 上 绘制 一 些 图 形 ， 利 用 这 
个 新 的 特性 ， 可 以 在 网 页 中 创建 一 个 类 似 于 钟表 的 特效 。 本 实例 结合 第 2 章 知 识 , 创建 了 一 个 
时 钟 特效 。 具 体 步 又 如 下 所 示 。 

0 则 分 析 需 求 。 在 画布 上 绘制 时 钟 ， 需 要 绘制 几 个 必要 的 图 形 ， 表 盘 、 时 针 、 分 针 、 秒 
针 和 中 心 圆 这 几 个 图 形 。 这 样 将 上 面 几 个 图 形 组 合 起 来 ， 便 构成 了 一 个 时 针 界 面 ， 然 后 使 用 
JavaScript 代码 ， 根 据 时 间 移 动 秒针 、 分 针 和 时 针 。 实 例 完 成 后 ， 效 果 如 图 18-26 所 示 。 


同上 回避 | 


DP | 加 cn: /iede/te. 15. Mal 


| ews 天 | 


图 18-26 ”时 钟 特效 


t@3j 创建 HTML 页 面 ， 代 码 如 下 : 


<!DOCTYPE html> 
<html> 

<head> 

<title>canvas 时 钟 </title> 
</head><body> 

<canvas id="canvas" width="200" height="200" style="border:1px solid #000:"> 您 的 浏览 器 不 支持 Canvas。 

</canvas></body></html> 
上 面 代码 创建 了 一 个 画布 , 其 宽度 为 200 像素 , 高 度 为 200 像素 , 带 有 边框 , 颜色 为 黑 
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样式 为 直线 型 。 在 Firefox 5.0 中 浏览 效果 如 图 18-27 所 示 ， 可 以 看 到 显示 了 一 个 带 有 黑 


的 画布 ， 画 布 了 


P 没 有 任何 信息 。 


D) canvas 时 圳 - Worills Firefor 
文件 四 妨 得 下 查看 了 历史 G) 书 符 如 工具 中 
日 sale Aisi/ el6/16.15. Mal 


li 


图 18-27 定义 画布 


03j 添加 JavaScript， 绘 制 不 同 图 形 ， 代 码 如 下 : 


<script type="text/JavaScript" language="JavaScript" charset="utf-8"> 


Var canvas = document.getElementById('canvas): 


Var ctx = canvas.getContext('2d"); 


if(ctx){ 


色 边框 


Var timerId; 
var frameRate = 60; 
function canvObjectO{ 
this.x = 0; 
this.y = 0; 
this.rotation = 0: 
this.borderWidth = 2; 
this.borderColor = #000000'; 
this.fill = false; 
this.fillColor = '#ff0000"; 
this.update = fonction0){ 
这 !this.ctx)throw new Error(' 你 没有 指定 ctx 对 象 。"); 
Var ctx = this.ctx 
ctx.save(); 
ctx.lineWidth = this.borderWidth; 
ctx.strokeStyle = this.borderColor:; 
ctx.fillStyle = this.fillColor; 
ctx.translate(this.x, this.y); 
if(this.rotation)ctx.rotate(this.rotation * Math.PL/180); 
if(this.draw)this.draw(ctx): 
if(this.fill)etx fil10: 
ctx.stroke(); 


ctx.restore(); 
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timerId = setInterval(function(){ 
// 清除 画布 
ctx.clearRect(0,0,200,200); 
/ 填充 背景 色 
ctx.fillStyle = 'orange'; 
ctx.fillRect(0,0,200,200); 
/ 表盘 
circle.update(); 
/ 刻度 
for(var i=0:cache=ls[i++];)cache.update(); 
/ 时 针 
hour.rotation = (new Date()).getHours() * 30; 
hour.update(); 
/ 分 针 
minute.rotation = (new Date()).getMinutes() * 6; 
minute.update(): 
/ 秒针 
seconds.rotation = (new DateO).getSecondsO * 6; 
seconds.update(); 
/ 中 心 圆 
center.update(); 

},(1000/frameRate)|0): 

}else{ 
alert(' 您 的 浏览 器 不 支持 Canvas 无 法 预览 跟 我 一 起 说 : "很 遗憾 1""); 
b 
</script> 


由 于 篇 幅 比较 长 , 这 里 只 显示 了 部 分 代码 。 其 详细 代码 可 以 在 光盘 中 查询 。 上 面 代码 首先 
绘制 了 不 同类 型 的 图 形 , 例如 时 针 、 秒 针 和 分 针 等 。 然 后 再 将 其 组 合 在 一 起 ， 并 根据 时 间 定 义 
时 针 等 指向 。 在 Firefox 5.0 中 浏览 效果 如 图 18-28 所 示 ， 可 以 看 到 页 面 中 出 现 了 一 个 时 钟 ， 其 
秒针 在 不 停 地 移动 。 


图 18-28 最 终 特效 
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18.10 ”综合 实例 10 一 一 颜色 选择 器 


在 页 面 中 定义 背景 色 和 字体 颜色 ,是 比较 常见 的 一 种 操作 ,在 选取 颜色 时 比较 麻烦 ,不 知 
道 那 种 颜色 适合 , 并 且 不 知道 颜色 值 是 什么 。 此 时 可 以 利用 颜色 选择 器 来 定义 颜色 并 获取 颜色 
值 。 本 实例 将 创建 一 个 颜色 选择 器 ， 可 以 自由 获取 颜色 值 。 具 体 步 又 如 下 : 


to 贡 分 析 需 求 。 本 实例 原理 非常 简单 ， 就 是 将 几 个 常用 的 的 颜色 值 进 行 组 合 ， 再 合并 ， 
就 是 所 要 选择 的 颜色 值 ， 是 利用 JavaScript 代码 完成 的 。 实 例 完 成 后 ， 实 际 效果 如 图 18-29 所 
示 。 


图 18-29 设 定 页 面 背 景色 
t@3 创建 基本 HIML 页 面 ， 代 码 如 下 : 


<!DOCTYPE html> 

<html> 
<head><title> 背 景色 选择 器 </title> 
</head> 

<body bgcolor="#FFFFFF"> 
</body></html> 


to3j 添加 JavaScript 代码 ， 实 现 颜色 选择 ， 代 码 如 下 : 


<script language="JavaScript"> 

<!-- 

var hex = new Array(6) 

hex[0] = "FF" 

hexlll="CE” 

hex[21= "99" 

hex[3] = "66" 

hex[4] = "33" 

hex[51= "00" 

function display(triplet) 
document.bgColor = "#4 + triplet 
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alert( 现 在 的 背景 色 是 #+triplet) 
b 
function drawCell(red, green, blue) 
{ 
document.write('<TD BGCOLOR="# + red + green + blue + ">") 
document.write(<A HREF="JavaScript:display(\" + (red + green + blue) + \")">') 
document.write(‘<IMG SRC="place.gif' BORDER=0 HEIGHT=12 WIDTH=12>") 
document.write('</A>') 
document.write('</TD>'") 
} 
function drawRow(red, blue) 
{ 
document.write('<TR>') 
for (vari= 0; 1< 6; ++1) 
人 
drawCell(red, hex[i], blue) 
} document.write('</TR>) 
}function drawTable(blue) 
d 
document.write(‘<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>) 
for (vari= 0; i< 6; ++HD) 
{| 
drawRow(hex[i], blue) 
} 
document.write('</TABLE>'") 
} 
function drawCube() 
{ 
document.write(‘<TABLE CELLPADDING=5 CELLSPACING=0 BORDER=1><TR>') 
for (var i= 0; i< 6; ++1) 
{ 
document.write('<TD BGCOLOR="#FFFFFF">'") 
drawTable(hex[i]) 
document.write('</TD>'") 
} document.write('</TR></TABLE>'") 
}drawCube() 
//--></script> 


上 面 代码 中 , 创建 了 一 个 数组 对 象 hex 用 来 存放 不 同 的 颜色 值 。 下面 几 个 函数 分 别 将 数组 
中 颜色 组 合 在 一 起 ， 并 在 页 面 显示 ，display 函数 完成 定义 背景 颜色 和 显示 颜色 值 。 

在 正 9.0 中 浏览 效果 如 图 18-30 所 示 ， 可 以 看 到 页 面 显示 多 个 表格 ， 每 个 单元 格 代表 一 种 
颜色 。 
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图 18-30 ”最终 效果 
18.11 问题 解答 


1.JavaScript 的 数组 中 常用 方法 有 哪些 ? 
@ jion0: 将 array 中 的 所 有 element 以 string 的 形式 连 在 一 起 : 


var a= [1,2,3]; 
s= a.join(); l/s="1,2,3" 
s=ajoin(™:"); //s="]:2:3" 
@ reverse():; 将 Array 的 element 顺 数 颠倒 : 


var a= [1,2,3]; 
a.reverse(); 
s=ajoin(;//s = "3,2,1" 
@ sort(): 排序 ， 默 认 按 字母 顺序 排序 case sensitive, 可 以 自 定义 排序 方式 .: 


var a= [111,4,33,2]; 
a.sort0; //a== [111,2,33,4] 
a.sort(function(a,b) {//a 一 [2.4.33,111] 
return a-b; // Returns< 0, 0, or >0 
D); 
@ concat(): 连接 多 个 Array: 


var a =[1,2,31; 
a.concat(4,5); // return [1,2,3,4,5] 
a.concat([4,5]); // return [1,2,3,4,5] 


aconcat([4.5]. [6,7]) VW retum [1.2.3.4.5.6.7] 
a.concat(4,[5,[6,7]]); // return [1.2.3.4.5.6.7] 


2. JavaScript 中 注释 有 哪些 ? 
在 程序 中 添加 注释 来 描述 代码 的 功能 , 通过 注释 还 可 以 使 一 些 代码 无 效 , 以 实现 逐 行 检查 
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程序 的 目的 ， 可 及 时 发 现 并 解决 问题 。JavaScript 主要 提供 了 三 种 注释 的 方法 : 
@ 单行 注释 : 在 需要 注释 的 代码 前 添加 字符 “//“，// 后 面 的 部 分 会 被 注释 。 
@ 多 行 注释 : 在 代码 前 添加 “/*”， 之 后 添加 “*/”"， 之 间 的 部 分 会 被 注释 。 
@ HTML 注释 : 使 用 传统 的 HTML 注释 ,，“<!” 和 “-->” 之 间 的 部 分 会 被 注释 ， 注 释 
内 容 可 以 是 一 行 或 多 行 。 


第 19 章 综合 实战 一 一 企业 门户 网 站 


作为 小 型 软件 企业 的 网 站 ， 一 般 规 模 不 是 太 大 ， 通 常 包含 3~5 个 栏目 ， 例 如 “产品 ”、 
“客户 ”和 “联系 我 们 ”栏目 等 ,并且 有 的 栏目 甚至 只 包含 一 个 页 面 ， 例 如 “联系 我 们 ”栏目 。 
此 类 网 站 通常 都 是 为 展示 公司 形象 , 说 明 公 司 业务 范围 和 产品 特色 的 , 这 样 的 网 站 只 要 一 个 首 
页 加 上 若干 内 容 即 可 。 


19.1 构思 布局 


本 实例 是 模拟 一 个 小 型 软件 公司 的 网 站 , 其 公司 主要 承接 电信 方面 的 各 种 软件 项 目 。 网 站 
上 包括 “首页 ”、“ 产 品 ”、 “客户 ” 和 “联系 方式 ”等 栏目 。 本 实例 中 采用 红色 和 白色 配合 ， 
红色 部 分 显示 导航 菜单 ， 白 色 显示 文本 信息 。 在 正 9.0 中 浏览 其 效果 如 图 19-1 所 示 。 


es 


YOUR LOGO COMPANY 


计算 机 网 站 


图 19-1 计算 机 网 站 首页 
19.1.1 设计 分 析 


作为 一 个 软件 公司 网 站 首页 ， 其 页 面 需 要 简单 、 明 了 , 给 人 以 清晰 的 感觉 。 页 头 部 分 主要 
放置 导航 菜单 和 公司 Logo 信息 等 ， 其 Logo 可 以 是 一 张 图 片 或 者 文本 信息 等 ， 页 面 主体 分 为 
两 个 部 分 , 页 面 主体 左 侧 是 公司 介绍 , 可 以 在 首页 上 概括 性 描述 ; 页 面 主体 右 侧 是 “最 新 消息 ”、 
“产品 展示 ”和 “客户 ”等 ， 其 中 “产品 展示 ”和 “客户 ”的 链接 信息 ， 以 列表 形式 介绍 重要 
信息 ， 也 可 以 通过 页 面 顶部 导航 菜单 进入 相应 页 面 介绍 。 

对 于 网 站 的 其 他 子 页 面 ， 篇 幅 可 以 比较 短 ， 其 重点 是 介绍 软件 公司 业务 、 联 系 方式 、 产 品 
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信息 等 ， 页 面 需 要 与 首页 风格 相同 。 
19.1.2 ”排版 架构 


从 上 面 效 果 图 可 以 看 出 , 页 面 结构 并 不 是 太 复杂 , 采用 的 是 上 中 下 结构 ,页 面 主体 部 分 又 
嵌 套 了 一 个 左右 版 式 结构 。 其 效果 如 图 19-2 所 示 。 


页 头 部 分 
页 面 主体 


左 侧 || 中 间 | | 右 侧 
列表 || 列表 || 列表 


页 脚 部 分 


图 19-2 页 面 总 体 框架 


在 HIML 页 面 中 , 通常 使 用 DIV 层 对 应 上 面 不 同 的 区 域 , 可 以 是 一 个 DIV 层 对 应 一 个 区 
也 可 以 是 多 个 DIV 层 对 应 同一 个 区 域 。 本 实例 的 DIV 代码 如 下 : 


入 


<div id="container">/* 页 面 布局 容器 */ 
<div id="top"> 

</div><!--end top--> 

<div id="header"> 

</div><!--end header--> 

<div id=me>/* 导 航 菜 单 */ 

</div> 

<div id="content"> 

<div id="text">/* 页 面 主体 左 侧 内 容 */ 
</div><!--end text--> 

<div id="column">/* 页 面 主体 右 侧 内 容 */ 
</div><!--end column--> 

</div><!--end content--> 

<div id="footer">/* 页 脚 部 分 */ 
</div><!--end footer--> 

</div><!--end container--> 


上 面 代 码 中 ，id 名 称 为 container 的 层 是 整个 页 面 的 布局 容器 ，top 层 、header 层 和 me 层 
共同 组 成 了 页 头 部 分 ,top 层 用 于 显示 页 面 logo，header 层 用 于 显示 页 头 文本 信息 ，me 层 用 于 
显示 页 头 导 航 菜单 信息 。 页 面 主体 是 content 层 ， 其 包含 了 两 个 层 ，text 层 和 column 层 ，text 
层 是 页 面 主体 左 侧 的 内 容 ， 显 示 公 司 介绍 信息 ; column 层 同 页 面 主体 右 侧 的 内 容 ， 显 示 公司 
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的 导航 链接 。Footer 层 是 页 脚 部 分 ， 用 于 显示 版 权 信息 和 地 址 信息 。 
在 CSS 文件 中 ， 对 应 container 层 和 content 层 的 CSS 代码 如 下 : 


E23 


#container 
{ 
margin: Opt auto; 
width: 770px; 
position: relative; } 
#content { 
background: transparent url(images/content.gif) repeat-y; 
clear: both; 
margin-top: Spx; 
width: 770px; 
} 
上 面 代码 中 ，#container 选择 器 定义 了 整个 布局 容器 的 宽度 、 外 边 距 和 定位 方式 。#content 
选择 器 定义 了 背景 图 片 、 宽 度 和 顶部 边 距 。 


19.2 ”模块 分 割 
当 页 面 整体 架构 完成 后 , 就 可 以 动手 制作 不 同 的 模块 区 域 。 其 制作 流程 采用 自 上 而 下 ， 从 
左 到 右 的 顺序 。 完 成 后 ， 再 对 页 面 样式 进行 整体 调整 。 
19.2.1 Logo 与 导航 菜单 


- 般 情 况 下 ，Logo 信息 和 导航 菜单 都 放 在 页 面 项 部 ， 作 为 页 头 部 分 。 其 中 Logo 信息 作为 
公司 标志 , 通常 放 在 页 面 的 左上 角 或 右上 角 ; 导航 菜单 放 在 页 头 部 分 和 页 面 主 体 二 者 之 间 , 用 
于 链接 其 他 的 页 面 。 在 下 9.0 中 浏览 效果 如 图 19-3 所 示 。 


YOUR LOGO COMPANY 


计算 机 网 站 


图 19-3 页面 Logo 和 导航 菜单 
在 HIML 文件 中 ， 用 于 实现 页 头 部 分 的 HTML 代码 如 下 : 


<div id="top"> 
</div><!--end top--> 
<div id="header"> 
<hl> 计 算 机 网 站 </h1> 
</div><!--end header--> 
<div id=me> 


314。 


上 面 代 码 中 ，top 层 用 于 显示 页 面 Logo，header 层 用 于 显示 页 头 的 文本 信息 ， 例 如 公司 名 
称 ; me 层 用 于 显示 页 头 导 航 菜单 。 在 me 层 中 ， 有 一 个 无 序列 表 ， 用 于 制作 导航 菜单 ， 每 个 
选项 都 由 超级 链接 组 成 。 

在 CSS 样式 文件 中 ， 对 应 上 面 标记 的 CSS 代码 如 下 : 
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ul#menu { 
margin: Opt; 
} 
#menuli{ 
list-style-type: none; 
float: left: 
text-align: center; 
width: 104px; 
margin-right: 3px: 
font-size: 1.05em:; 
} 
#menua { 
background: transparent url(images/menu.gif ) no-repeat: 
overflow: hidden; 
display: block; 
height: 28px; 
padding-top: 3px: 
text-decoration: none; 
twidth: 100%:; 
font-size: lem: 
font-family: Verdana,"Geneva CE",lucida,sans-serif: 
color: rgb(255, 255, 255); 
} 
#menu li >a, #menu li >strong { 
width: auto; 
lL 
#menu a.actual { 
background: transparent Url(images/menu-actual.gif) no-repeat: 
color: rgb(149, 32, 32); 
} 
#menu a:hover { 
color: rgb(149, 32, 32); 
3 


上 面 代码 中 ，#top 选择 器 定义 了 背景 图 片 和 层 高 ，#beader 定义 了 背景 图 片 、 高 度 和 顶部 
外 边 距 ; #menu 层 定义 了 层 定位 方式 和 坐标 位 置 。 其 他 选择 分 别 定 义 了 上 面 三 个 层 中 元 素 的 显 
示 样 式 ， 例 如 段落 显示 样式 、 标 题 显示 样式 和 超级 链接 样式 等 。 
19.2.2 ” 左 侧 文 本 介绍 

在 页 面 主体 中 ,其 左 侧 版 式 主 要 介绍 公司 相关 信息 。 左 侧 文本 采用 的 是 左 浮动 、 固 定 宽度 
的 版 式 设计 ， 重 点 在 于 调节 宽度 使 不 同 浏览 器 之 间 能 够 效果 一 致 ， 并 且 颜 色 上 要 配合 Logo 和 
左 侧 的 导航 菜单 ， 使 整个 网 站 和 谐 、 大 气 。 在 正 9.0 中 浏览 效果 如 图 19-4 所 示 。 
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欢迎 来 到 我 们 的 网 站 

远大 公司 成 立 于 1998 年 ， 注 册 资 本 
1700 万 元 。 是 国家 认定 的 高 新 技术 企 
业 、 软 件 企业 ， 是 专业 的 电信 系统 仿 软 
件 和 应 用 服务 供应 商 。 

公司 坚持 走 自立 创新 、 稳 步 发 展 的 
道路 ， 以 创立 品牌 为 自己 的 基本 策略 ， 
以 产品 自身 的 品质 ， 先 进 的 技术 和 良好 
的 服务 取信 于 用 户 。2002 年 至 今 公司 先 
后 有 多 个 软件 产品 获得 了 河南 省 信息 产 
业 厅 颁发 的 《软件 产品 登记 证 书 》 和 国 
家 版 权 局 颁发 的 《软件 著作 权 登 记 证 
书 》。 同 时 大 方 的 进步 和 发 展 ， 也 得 到 
了 政府 部 门 的 大 力 支持 和 关注 ， 获 得 | 
家 科技 部 和 省 、 市 政府 部 门 技术 创新 : 
金 无 偿 资助 百 余万元 。 并 正式 获得 中 


回 


四 2 


质量 体系 认证 中 心 颁发 的 509001:2008 质 量 管理 体系 认证 证 书 。 


图 19-4 页 面 左 侧 文本 介绍 
在 HTML 文件 中 ， 创 建 页 面 左 侧 内 容 介 绍 的 代码 如 下 : 


<div id="content"> 


<div id="text"> 


<h3 class="headlines"><a href="#" title="testing"> 欢 迎 来 到 我 们 的 网 站 </a></h3> 


<p><img src="imal 


系统 仿 软 件 和 应 用 服务 供应 商 。</p><p> 


公司 坚持 走 自立 创新 、 稳 步 发 展 的 道路 ， 以 创立 品牌 为 自己 的 基本 策略 ， 以 产品 自身 的 品质 ， 先 进 的 技 
术 和 良好 的 服务 取信 了 于 用 户 。2002 年 至 今 公司 先后 有 多 个 软件 产品 获得 了 河南 省 信息 产业 厅 颁 发 的 《软件 产 
品 登 记 证 书 》 和 国家 版 权 局 颁发 的 《软件 著作 权 登 记 证 书 》。 同 时 远大 的 进步 和 发 展 ， 也 得 到 了 政府 部 门 的 
大 力 支持 和 关注 ， 获 得 国家 科技 部 和 省 、 市 政府 部 门 技术 创新 基金 无 偿 资 助 百 余 万 元 。 并 正式 获得 中 国 质量 
体系 认证 中 心 颁发 的 I SO9001:2008 质量 管理 体系 认证 证 书 。 


</p> 


<p>&nbsp;</p> 


</div><!--end text--> 


</div> 


上 而 代码 中 ，content 层 是 页 面 主体 ，text 上 


和 段落 信息 ， 段 落 中 包含 一 张 图 片 。 
在 CSS 文件 中 ， 对 于 上 面 HIML 标记 的 CSS 代码 ， 如 下 所 示 : 


#text { 


background: rgb(255, 255, 255) url('text-top.gif) no-repeat: 


width: 518px:; 


color: rgb(0, 0, 0): 


float: left: 
} 


ges/fotos.jpg" alt="fotos" align="right" /> 
远大 公司 成 立 于 1998 年 ， 注 册 资 本 1700 万 元 。 是 国家 认定 的 高 新 技术 企业 、 软 件 企 业 ， 是 专业 的 电信 


页 面 主体 中 左 侧 的 部 分 。text 层 包 含 了 标题 


精通 HTM 5 网 页 设计 


#text hl, #text h2, #text h3, #text h4 { 
color: rgb(140, 9, 9); 

} 

#text h3.headlines a { 
color: rgb(140, 9, 9); 


} 

上 面 代码 中 ，#text 层 定义 了 背景 图 片 、 背 景 颜 色 、 字 体 颜色 和 页 面 左 浮动 。 下 面 选 择 器 
定义 了 标题 显示 样式 ,例如 字体 颜色 等 。“#text h3.headlines a” 选 择 器 定义 了 标题 3、 类 headlines 
和 超级 链接 显示 样式 。 

19.2.3” 右 侧 导 航 链接 
在 页 面 主体 右 侧 版 式 中 , 其 文本 信息 不 是 太 多 , 但 非常 重要 。 是 首页 用 于 链接 其 他 页 面 的 


导航 链接 ， 例 如 客户 详细 信息 、 最 新 消息 等 。 同 样 ， 右 侧 版 式 需 要 设置 为 固定 宽度 并 且 向 左 浮 
动 的 版 式 。 在 正 9.0 中 浏览 页 面 效果 如 图 19-5 所 示 。 


图 19-5 页 面 右 侧 链接 


从 上 面 效果 图 可 以 ， 需 要 包含 几 个 无 序列 表 和 标题 ， 其 中 列表 选项 为 超级 链接 。HITML 
文件 中 用 于 创建 页 面 主 体 右 侧 版 式 的 代码 ， 如 下 所 示 : 


<div id="column"> 

<h3><span> 最 新 消息 </span></h3> 

<ul class="category list"><li><a hre 伍 "#"> 公 司 组 织 员 工 连 云 港 旅游 </a></li> 
<li><a hre 伍 "#">2011 员工 乒乓 球 大 赛 开幕 </a></li> 

<li><a hre 仁 "#"> 公 司 总 经 理会 见 实习 大 学 生 </a></li> 

<li><a hre 伍 "#"> 公 司 销售 部 门 再 传 捷报 </a></li></ul> 
<h3><span> 产 品 展示 </span></h3> 

<ul class="recent_articles"><li><a hre 伍 "#'> 在 线 人 员 素 质 考核 系统 </a></li> 
<li><a hre 伍 "> 线 损 计算 机 系统 </a></li> 

<li><a hre 伍 "#"> 质 量 运用 管理 系统 </a></li></nl> 

<h3><span> 客 户 </span></h3> 

<ul class="wet_recent_comments"><li><a hre 伍 "#"><cite> 华 中 地 区 </cite></a><p> 河 南 地 区 </p></li> 
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<li><a href="#"><cite> 华 东 地 区 </cite></a><p> 上 海地 区 </p></li></nl> 
</div><!--end column--> 
<div id="content-bottom">&nbsp:</div> 


在 上 面 的 代码 中 ， 创 建 了 两 个 层 ， 分 别 为 column 层 和 content-bottom 层 。 其 中 column 层 
用 于 显示 页 面 主体 中 右 侧 链接 ， 并 包含 了 三 个 标题 和 三 个 超级 链接 。content-bottom 层 用 于 消 
除 float 层 的 浮动 效果 。 

在 CSS 文件 中 ， 用 于 修饰 上 面 HTML 标记 的 CSS 代码 ， 如 下 所 示 : 


#column { 
background: rgb(142, 14, 14) url(images/column.gif) no-repeat: 
float: right: 
width: 247px; } 
#column p { font-size: 0.7em; } 
#column ul { font-size: 0.8em; } 
#column h3 { 
background: transparent url(images/h3-column.gif) no-repeat: 
position: relative; 
left: -18px; 
height: 26px; 
width: 215px:; 
margin-top: 10px: 
padding-top: 6px; 
padding-left: 6px; 
font-size: 0.9em; 
z-index: 1; 
font-family: Verdana,"Geneva CE",lucida,sans-serif: 
} 
#column h3 span { margin-left: 10px: } 
#column span.name { 
text-align: right; 
color: rgb(223, 58, 0); 
margin-right: Spx: 
} 
#column a { color: rgb(255, 255, 255): } 
#column a:hover { color: rgb(80, 210, 122); } 
p.comments { 
text-align: right; 
font-size: 0.8em:; 
font-weight: bold; 
padding-right: 10px: 
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#content-bottom { 
background: transparent url('images/content-bottom.gif) no-repeat scroll left bottom:; 
clear: both: 
display: block; 
width: 770px; 
height: 13px; 
font-size: Opt; 
} 


上 面 代 码 中 , #column 选择 器 定义 背景 图 片 、 背 景 颜色 、 页 面 右 浮动 和 宽度 ,#content-bottom 
选择 器 定义 背景 图 片 、 宽 度 、 高 度 、 字体 大 小 和 以 块 显示 , 并 且 使 用 clear 消除 前 面 层 使 用 float 
的 影响 。 其 他 选择 器 主要 定义 column 层 中 其 他 元 素 的 显示 样式 ， 例 如 无 序列 表 样 式 、 列 表 选 
项 样式 和 超级 链接 样式 等 。 


19.2.4 ”版 权 信息 


版 权 信息 一 般 放 置 到 页 面 底部 ， 用 于 介绍 页 面 的 作者 、 地 址 信息 等 ,是 页 脚 的 一 部 分 。 页 
脚 部 分 和 其 他 网 页 部 分 一 样 ， 需 要 保持 简单 、 清 晰 的 风格 。 在 正 9.0 中 浏览 效果 如 图 19-6 所 


不 。 


图 19-6 页 脚 部 分 
从 图 19-6 可 以 看 出 ， 此 页 脚 部 分 非常 简单 ， 只 包含 了 一 个 作者 信息 的 超级 链接 ， 因 此 设 
置 起 来 比较 方便 ， 其 代码 如 下 : 
<div id="footer"> 
<p id="ivorius"><a hre 伍 "#"> 网 页 设计 者 : 李 四 工作 室 </a></p> 
</div><!--end footer--> 


上 面 代码 中 ， 层 footer 包含 了 一 个 段落 信息 ， 其 中 段落 的 id 是 ivorius。 
在 CSS 文件 中 ， 用 于 修饰 上 面 HTML 标记 的 样式 代码 ， 如 下 所 示 : 


#footer { 
background: transparent url(images/footer.png) no-repeat scroll left bottom; 
margin-top: Spx; 
padding-top: 2px; 
height: 33px; 
} 
#footer p { text-align: center: } 
#footer a { color: rgb(255, 255, 255); } 
#footer a:hover { color: rgb(223, 58, 0); } 
Pp#ivorius { 
float: right; 


" 320。 
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margin-right: 13px; 
font-size: 0.75em:; 


} 
p#ivorius a { color: rgb(80, 210, 122): } 


上 面 代码 中 ，#footer 选择 器 定义 了 页 脚背 景 图 片 、 内 外 边 距 的 顶部 距离 和 高 度 。 其 他 选 
择 器 定义 了 页 脚 部 分 文本 信息 的 对 齐 方式 、 超 级 链接 样式 等 。 


19.3 整体 调整 


前 面 的 各 个 小 节 中 ,完成 了 首页 中 不 同 部 分 的 制作 , 其 整个 页 面 基本 上 都 已 经 成 形 。 在 制 
作 完 成 后 ,需要 根据 页 面 实际 效果 作 一 些 细节 上 的 调整 ， 从 而 能 更 加 完善 页 面 整体 效果 。 例如 
各 块 之 间 的 padding 和 margin 值 是 否 与 页 面 整 体 协 调 ， 各 个 子 块 之 间 是 否 协调 统一 等 。 页 面 
效果 调整 前 ， 在 正 9.0 中 浏览 效果 如 图 19-7 所 示 。 
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图 19-7 页 面 调整 前 效果 


从 图 19-7 可 以 发 现 页 面 段 落 没 有 缩 进 ， 页 面 右 侧 列表 选项 之 间距 离 太 小 等 。 这 时 可 以 利 
用 CSS 属性 调整 ， 其 代码 如 下 所 示 : 


Pp {margin: 0.4em 0.Semi font-size: 0.85em:text-indent:2em: } 
a { color: rgb(25, 126, 241); text-decoration: underline; } 
a:hover { color: rgb(223, 58, 0): text-decoration: none: } 

a img { border: medium none ; } 

UL ol { margin: 0.5em 2.5em: } 

h2 { margin: 0.6em Opt 0.4em 0.4em: } 

h3, h4, hs { margin: lem Opt 0.4em 0.4em:; } 
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* { margin: Opt; padding: Opt; } 
body { background: rgb(61, 62, 63) url(images/body.gif) repeat: color: white; font-size: lem: font-family: 
"Trebuchet MS",Tahoma,"Geneva CE",lucida; } 


上 面 代码 中 ， 全 局 选择 器 “*” 设 置 了 内 外 边 距 距离 ，body 标记 选择 器 设置 了 背景 颜色 、 
图 片 、 字 体 大 小 ,字体 颜色 和 字形 等 。 其 他 选择 器 分 别 设置 了 段落 、 超 级 链接 、 标 题 和 列表 等 
样式 信息 。 


19.4 ”问题 解答 


1.，Firefox 和 下 浏览 器 ， 如 何 处 理 负 边界 问题 ? 

在 正 中 ,对 于 超出 父 元 素 的 部 分 会 被 父 元 素 覆 盖 ， 而 在 Firefox 中 ， 对 于 超出 父 元 素 的 部 
分 会 覆盖 父 元 素 ， 但 前 提 是 父 元 素 有 边框 或 内 边 距 ,， 不 然 负 边 距 会 显示 在 父 元 素 上 ， 使 得 父 元 
素 拥 有 负 边 距 。 在 进行 网 页 设计 时 ， 针 对 上 面 的 情况 可 以 对 元 素 进行 相对 定位 。 

2. 在 定义 子 元 素 的 上 边 距 时 ， 如 果 超 出 元 素 高 度 ， 怎 么 处 理 ? 

在 正 浏 览 器 中 , 子 元 素 上 边 距 显示 正常 ， 而 在 Firefox 浏览 器 中 ， 子 元 素 上 边 距 显示 在 父 
元 素 上 方 。 其 解决 办 法 是 在 父 元 素 中 增加 overflow:hidden 语句 或 给 父 元 素 增 加 边框 或 内 边 距 。 
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HTML 5 作为 下 一 代 Web 开发 标准 ， 成 为 主流 指日可待 。 它 对 音频 视频 、 事 件 处 理 、 绘 
图 等 的 支持 都 让 人 们 非常 期 待 。 本 章 主要 通过 一 个 HTML 5 游戏 ， 让 读者 轻松 掌握 HTML 5、 
CSS 和 JavaScript 的 新 特性 ， 并 能 灵活 应 用 到 Web 开发 中 。 


20.1 ”游戏 概述 


本 实例 将 制作 一 个 星际 争霸 的 游戏 ， 需 要 实现 的 效果 如 下 : 

玩家 按 Enter 键 开始 游戏 ， 进 入 游戏 主 界面 后 ， 按 键盘 上 的 左右 键 控制 游戏 的 移动 方向 ， 
按 A 键 开始 射击 。 默 认 情 况 下 ， 玩 家 的 生命 值 为 100 分 ， 如 果 玩 家 没有 射击 到 敌 机 ， 则 分 为 
两 种 情况 ， 收 机 和 玩家 的 战机 相 接 ， 则 减少 玩家 生命 值 10 分 ， 敌 机 和 玩家 的 战机 没有 相 撞 ， 
则 玩家 的 生命 值 不 减少 。 

游戏 开始 页 面 的 效果 如 图 20-1 所 示 。 


图 20-1 游戏 开始 界面 
按 Enter 键 ， 进 入 游戏 运行 页 面 ， 按 左右 键 控制 方向 ， 按 A 键 射击 敌 机 ， 效 果 如 图 20-2 
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图 20-2 游戏 主 界面 


20.2 ”游戏 需求 分 析 


创建 星际 争霸 游戏 主要 的 文件 夹 列表 如 图 20-3 所 示 。 


大 小 ”类 型 
文件 来 
文件 来 


次 件 夹 
图 index. html 1 KB Firefox HIML Do... 


图 20-3 ”游戏 的 主要 文件 夹 列表 


其 中 css 文件 夹 下 主要 包括 游戏 网 页 的 样式 表 ， 文 件 名 称 为 main.css。images 文件 夹 下 主 
要 包括 游戏 的 飞机 和 环境 背景 图 等 。js 文件 夹 下 主要 包括 jquery.js 和 scriptjs 两 个 文件 。 其 中 
jqueryjs 主要 定义 了 JavaScript 脚本 的 框架 , scriptjs 文件 主要 是 为 了 实现 游戏 功能 。Index.html 
是 游戏 启动 的 主页 面 。 

Images 文件 夹 下 的 图 片 效 果 如 图 20-4 所 示 。 


“324。 
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explosion. pne intro. jp 名 
RR a 
levelmap. jpe Plane. pne rocket. pne 


图 20-4 ”游戏 需要 的 主要 图 片 
20.3 HTML 5、CSS 和 JavaScript 搭配 实现 


下 面 查看 游戏 实现 所 需要 的 HTML 5、CSS 和 JavaScript 的 技术 。 
20.3.1 ”基本 的 HTML 5 结构 和 标记 
用 户 首先 需要 创建 Index.html， 实 现 基本 的 结构 和 标记 。 具 体 的 代码 如 下 : 


<!DOCTYPE html> 
<html lang="en" > 
<head> 
<meta charset="GB2312" /> 
<tile> 星 际 争霸 游戏 </title> 
<!-- 添加 样式 表 -> 
<link href="css/main.css" rel="stylesheet" type="text/css" /> 
<!-- 添加 scripts 脚本 代码 --> 
<!--[fltIE 9]> 
<script src="http://html $shiv.googlecode.com/svn/trunk/html 5.js"></script> 
<![endifl--> 
<script sre="js/jquery.js"></script> 
<script sre="js/script.js"></script> 
</head> 
<body> 
<header> 
<h2> 星 际 争霸 </h2> 
</header> 
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<div class="container"> 
<canvas id="scene" width="700" height="700" tabindex="1"></canvas> 
</div> 
</body> 
</html> 
其 中 <1--[if lt 正 9 上 > 表示 如 果 浏 览 器 版 本 小 于 IE9。 则 加 载 <script src="http:VHTML 
5shiv.googlecode.com/svn/trunk/HTML 5.js"></script>JavaScript 脚 本 代 码 。 <script 
src="js/jquery.js"></script> 和 <script src="js/scriptjs"></scrip 信 代码 表示 加 载 JavaScript 脚本 。 
<canvas id="scene" width="700" height="700" tabindex="1"></canvas> 表 示 绘 图 的 宽 高 为 700X 
700 像素 ，tabindex="1" 表 示 键 盘 移动 顺序 。 
运行 效果 如 图 20-5 所 示 。 


文件 四 编辑 到 ) 
| 于 | 站 县 际 争 十 游戏 


=- @fil/ OO 


星际 争霸 


图 20-5 游戏 主 界面 
HTML 5 最 重要 的 新 特征 主要 包括 canvas。 这 个 新 技术 为 开发 人 员 提 供 了 一 个 新 途径 ， 可 
以 采用 一 种 完全 自由 的 方式 绘图 、 包 含 图 像 以 及 放置 文本 。 与 以 前 的 HTML 版 本 相 比 ， 这 是 
一 个 比较 显著 的 改进 。 在 以 前 的 版 本 中 ， 虽 然 也 能 完成 一 些 简单 的 图 形 ， 或 者 使 用 JavaScript 
脚本 实现 ， 但 是 使 用 canvas 可 以 在 画布 上 自由 的 绘图 。 
20.3.2 ”使 用 CSS 修改 页 面 


CSS 允许 用 户 为 HTML 5 文档 中 的 各 个 部 分 指定 格式 ， 特 别 对 静态 的 HTML，CSS 的 功 
能 十 分 强大 。 此 游戏 的 CSS 样式 表 的 名 称 为 main.css 文件 。 代 码 如 下 : 


et 
margin: 0; 


Padding: 0; 
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} 
html { 
background-attachment: fixed; 
background: #bda9a2; 
background: -moz-linear-gradient(top, #bda9a2 0%, #90817a 47%, #6f6059 100%): 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%.#bda9a2), color-stop(47%, 
#90817a), color-stop(100%,#6f6059)): 
background: -webkit-linear-gradient(top, #bda9a2 0%,#90817a 47%,#6f6059 100%):; 
background: -o-linear-gradient(top, #bda9a2 0%.#90817a 47%,#6f6059 100%): 
background: -ms-linear-gradient(top, #bda9a2 0%.#90817a 47%,#6f6059 100%0); 
background: linear-gradient(to bottom, #bda9a2 0%,#90817a 47%,#6f6059 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#bda9a2', endColorstr=#6f6059', 
GradientType=0 ); 
height: 100%; 
} 
header { 
background-color:rgba(33, 33, 33, 0.9); 
color:#fff: 
display:block: 
font: 14px/1.3 Arial,sans-serif 
height:S0px: 
position:relative; 
} 
header h2{ 
font-size: 22px; 
margin: Opx auto; 
padding: 10px 0; 
width: 80%; 
text-align: center: 
header a, a:visited { 
text-decoration:none; 


color:#fcfecfe:; 
} 
#scene { 
display: block': 
height: 700px; 


margin: 10px auto: 
position: relative; 
width: 700px; 
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经 过 CSS 样式 表 修 改 后 ， 效 果 如 图 20-6 所 示 。 
星际 争霸 


图 20-6 CSS 修饰 过 的 界面 
20.3.3 ”JavaScript 编程 


JavaScript 是 一 种 脚本 编程 语音 ， 提 供 了 不 少 内 署 的 函数 来 访问 HTML 文档 的 各 个 部 分 ， 
包括 CSS 元 素 的 样式 。 

另外 ， 本 游戏 使 用 的 是 Jquery 框架 ，Jquery 是 继 prototype 之 后 又 一 个 优秀 的 JavaScript 
框架 。 它 是 轻 量 级 的 JS 库 ， 兼 容 CSS3， 还 兼容 各 种 浏览 器 。jQuery 使 用 户 能 更 方便 地 处 理 
HTML documents、events， 实 现 动画 效果 。 

其 中 ，JavaScript 文件 的 内 容 和 作用 如 下 : 


/ 定义 图 像 对 象 

var backgroundImage; 

Var oRocketImage: 

Var oExplosionImage: 

Var introImage: 

Var oEnemyImasge: 

var iBgShiftY = 9300; /水 平 宽度 为 10000 - canvas 高 度 为 700 
varbPause = true; // 游戏 暂停 

var plane = null; // 定义 飞机 对 象 

var rockets = []; // 定义 飞机 移动 数组 
var enemies = []; / 定义 敌 机 数组 

var explosions = []; / 定义 飞机 爆炸 数组 
var planeW = 200; // 定义 飞机 的 宽度 
var planeH = 110; // 定义 飞机 的 高 度 
var iSprPos = 2; // 飞机 的 初始 框架 
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var iMoveDir= 0; // 定义 移动 方向 
var iEnemyW = 128; // 敌 机 宽度 
var iEnemyH = 128; // 敌 机 高 度 
var iRocketSpeed = 10; // 初始 飞机 移动 速度 
var iEnemySpeed = 5; // 初始 敌 机 的 移动 速度 
var pressedKeys = []; / 定义 按键 数组 
variScore = 0; // 初始 化 分 数 
var iLife = 100; / 初始 化 生命 值 
var iDamage = 10; / 敌 机 撞击 玩家 的 飞机 后 的 损坏 值 
var enTimer = null; // 随机 出 现 一 个 敌 机 
// 定义 飞机 函数 对 象 
function Plane(x, y, w, h, image) { 
this.x = x; 
this.y =y; 
this.w = w; 
this.h = h; 
this.image = image; 
this.bDrag = false; 
} 
// 定义 攻击 函数 对 象 
function Rocket(x, y, w, h, speed, image) { 
this.x = x; 
this.y =y; 
this.w = w; 
this.h = h; 
this.speed = speed:; 
this.image = image; 


} 
// 定义 敌 机 函数 对 象 
function Enemy(x, y, w, h, speed, image) { 
this.x = x; 
this.y =y; 
this.w = Ww: 
this.h = h: 
this.speed = speed: 
this.image = image; 


} 

/ 定义 爆炸 函数 对 象 

function Explosion(x, y, w, h, sprite, image) { 
this.x = x; 
this.y =y; 


this.w = w: 
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thish =h: 

this.sprite = sprite; 

this.image = image: 
} 
1/ 从 XX 和 YY 之 中 随机 地 获取 字母 的 函数 
function getRand(x, y) { 

return Math.floor(Math.random()*y)+x; 


} 
// 初始 显示 函数 
function displayIntro() { 
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height): 
ctx.drawImage(introImage, 0, 0,700, 700); 
;: 
/ 绘制 主要 的 场景 函数 
function drawScene() { 
1f(! bPause) { 
iBgShiftY 一 2; / 飞机 移动 的 范围 
if (iBgShiftY< 5) { 
bPause = true:; 
1/ 绘制 场景 
ctx.font = '40px Verdana'; 
ctx.fillStyle = '#ffP; 
ctx.fillText('Finish, your score: ' + iScore * 10 +' points', 50, 200); 
Teturn; 
} 
/ 通过 按键 控制 飞机 
processPressedKeys(); 
// 清除 绘图 
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 
/ 绘制 游戏 背景 
ctx.drawImage(backgroundImage, 0, 0 + iBgShiftY, 700, 700, 0, 0, 700, 700): 
/ 绘制 游戏 飞机 
ctx.drawImage(plane.image, iSprPos*plane.w, 0, plane.w, plane.h, plane.x - plane.w/2, plane.y - 
plane.h/2, plane.w, plane.h):; 
// 绘制 爆炸 效果 
if (rockets.length >0) { 
for (var key in rockets) { 
1f (rockets[key] != undefined) { 
ctx.drawImage(rockets[key].image, rockets[key].x, rockets[key].y); 
rockets[keyl.y -= rockets[keyl.speed; 
// 如 果 攻 击 在 屏幕 范围 之 外 ， 则 忽略 攻击 
1f (rockets[key].y= 0) { 
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delete rockets[key]; 


> 
} 
// 绘制 爆炸 
if (explosions.length >0) { 
for (var key in explosions) { 
1f (explosions[key] != undefined) { 
// 显示 爆炸 效果 
ctx.drawImage(explosions[key].image, explosions[key].sprite*explosions[key].w， 0, 
explosions[key].w, explosions[key].h, explosions[key].x - explosions[key].w/2, explosions[key].y - explosions[key]. 
hy/2, explosions[key].w, explosions[key].h); 
explosions[key].sprite++; 
/ 如 果 敌 机 被 击毙 ， 则 消除 爆炸 对 象 
if (explosions[key].sprite >10) { 


delete explosions[key]; 
} 
i 
} 
// 绘制 敌 机 
if (enemies.length >0) { 
for (var ekey in enemies) { 
if (enemies[ekey] != undefined) { 
ctx.drawImage(enemies[ekey].image, enemies[ekey].x, enemies[ekey].y); 
enemies[ekey].y -= enemies[ekey].speed: 
/ 假如 敌 机 在 屏幕 之 外 ， 则 忽略 敌 机 对 象 
if (enemies[ekey].y >canvas.height) { 
delete enemies[ekey]: 
} 
} 
} 


if (enemies.length >0) { 
for (var ekey in enemies) { 
1f (enemies[ekey] != undefined) { 
// 碰撞 的 爆炸 效果 
if (rockets.length >0) { 
for (var key in rockets) { 
1f (rockets[key] != undefined) { 
站 (rockets[key].yY< enemies[ekey]ly + enemies[ekey].h/2 && 
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rockets[key].x >enemies[ekey].x && rockets[key].x + rockets[key].w< enemies[ekey].x + enemies[ekey].-w) { 
explosions.push(new Explosion(enemies[ekeyl.x + 
enemies[ekey].w / 2, enemies[ekey].y + enemies[ekey].h / 2, 120, 120, 0, oExplosionImage)); 
/ 消除 敌 机 和 爆炸 ， 然 后 增加 1 分 
delete enemies[ekeyl; 
delete rockets[key]; 
1iScore++; 


} 
/ 飞机 的 碰撞 
if (enemies[ekey] != undefined) { 
if (plane.y - plane.h/2< enemies[ekey].y + enemies[ekey].h/2 && planex - 
plane.w/2< enemies[ekeyl].x + enemies[ekey].w && plane.x + plane.w/2 >enemies[ekey].x) { 
explosions.push(new Explosion(enemies[ekey].x + enemies[ekey].w / 2, 
enemies[ekey].y + enemies[ekey].h / 2, 120, 120, 0, oExplosionImage)); 
/ 消除 敌 机 和 制作 损坏 
delete enemies[ekey]: 
iLife -= iDamage; 
站 (iLife<= 0) { // 游戏 结束 
bPause = true; 
/ 计算 总 得 分 
ctx.font ='38px Verdana'; 
ctx.fillStyle = '#ffP:; 
ctx.fillText(Game over, your score: ' + iScore * 10 + ' points', 25, 200); 
return; 


;3 

// 显示 生命 值 和 得 分 

ctx.font = '14px Verdana'; 

ctx.fillStyle = 内 fff; 

ctx fillText(Life: '+ iLife +'/ 100'. 50. 660); 
ctx.fillText('Score: ' + iScore * 10, 50, 680): 


} 
// 游戏 过 程 中 的 按键 函数 
function processPressedKeys(0 { 
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} 


计 (pressedKeys[37] != undefined) { // 左 键 控制 效果 
if (iSprPos >0) { 
iSprPos--; 
iMoveDir = -7; 
} 
if (plane.x - plane.w /2 >10) { 
plane.x += iMoveDir: 


} 
else 让 (pressedKeys[39] != undefined) { // 右键 控制 效果 


if(iSprPos<4) { 


iSprPost++; 
iMoveDir = 7; 

} 

if (plane.x + plane.w / 2< canvas.width - 10) { 
plane.x += iMoveDir; 

} 


// 增加 随机 的 敌 机 函数 
function addEnemy() { 


} 


clearInterval(enTimer); 

var randX = getRand(0, canvas.height - iEnemyH); 

enemies.push(new Enemy(randX., 0, iEnemyW. iEnemyH., - iEnemySpeed, oEnemyImage)); 
var interval = getRand(1000, 4000); 

enTimer = setInterval(addEnemy, interval); // 函数 循环 执行 


// 主要 的 默认 函数 
$(functionO{ 


canvas = document.getElementById('scene’); 

ctx = canvas.getContext('2d): 

/ 载 入 背景 图 片 

backgroundImage = new Image(); 

backgroundImage.src = "images/levelmap.jpg'; 

backgroundImage.onload = function() { 

} 

backgroundImage.onerror = function0O { 
console.log('Error loading the background image.): 

} 

introImage = new Image(); 

introImage.src = "images/intro.jpg'; 

/ 初始 化 敌 机 攻击 效果 
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oRocketImage = new Image(); 
oRocketImage.src = "images/rocket.png'; 
oRocketImage.onload = fonction0 {} 
1/ 初始 化 爆炸 图 片 
oOoExplosionImage = new Image(); 
oFExplosionImage.src = "images/explosion.png'; 
oExplosionImage.onload = function() { } 
/ 初始 化 敌 机 
oEnemyImage = new Image(); 
oEnemyImage.src = 'images/enemy.png'; 
oEnemyImage.onload = function() { } 
/ 初始 化 玩家 战机 
var oPlaneImage = new Image(); 
oPlaneImage.src = "images/plane.png'; 
oPlaneImage.onload = function() { 
Plane = new Plane(canvas.width / 2, canvas.height - 100, planeW, planeH, oPlaneImage); 
} 
$(window).keydown(function (evt){ // 手动 控制 飞机 的 事件 
var pk = pressedKeys[evtkeyCode]; 
让 (pH { 
pressedKeys[evt.keyCode] = 1; / 将 按键 添加 进 数组 
过 (bPause && evtkeyCode 一 13) { // 按 下 Enter 键 效果 
bPause = false; 
// 开始 游戏 
setInterval(drawScene, 30); // 循环 绘制 游戏 场景 
/ 添加 一 个 敌 机 
addEnemy(); 


D; 
$(window).keyup(function (evt) { 
// 松 开 按键 后 的 事件 
var pk = pressedKeys[evt.keyCodel: 
下 { 
delete pressedKeys[evt.keyCodel: 
/ 从 数组 中 移 除 按键 
} 
站 (evt.keyCode 一 65) {// 按 A 键 开 始 攻击 
Tockets.push(new Rocket(plane.x - 16, plane.y - plane.h, 32, 32, iRocketSpeed, oRocketImage)); 


} 
if (evt.keyCode 一 37 || evtkeyCode — 39) { 
// revert plane sprite to default position 


